部分 div 边框被切断

Question

我有一个容器元素，其中包含一些其他元素，但根据屏幕大小，它们的某些部分在各个部分莫名其妙地被切断了。当 HTML 页面的宽度调整（通过单击并拖动它）时，您可以在我的代码沙箱链接上观察行为。如何确保只渲染主容器边框，而子元素没有任何影响？

https://codesandbox.io/s/focused-tree-ms4f2

import React from "react";

import styled from "styled-components";

const StyledTextBox = styled.div`

  height: 15vh;

  width: 30vw;

  display: flex;

  flex-direction: column;

  margin: 0 auto;

  border: 1px solid black;

  background-color: #fff;

  > * {

    box-sizing: border-box;

  }

`;

const InputBox = styled.span`

  height: 35%;

  width: 100%;

  display: flex;

  border: none;

  outline: none;

`;

const UserInput = styled.input`

  height: 100%;

  width: 90%;

  border: none;

  outline: none;

`;

const SolutionBox = styled.div`

  height: 35%;

  width: 100%;

  border: none;

  outline: none;

`;

const StyledKeyboard = styled.span`

    height: 30%;

    width: 100%;

    position: relative;

    background-color: #DCDCDC;

    box-sizing: border-box;

    display: flex;

`

export default function App() {

  return (

    <StyledTextBox>

      <InputBox>

        <UserInput />

      </InputBox>

      <SolutionBox/>

      <StyledKeyboard/>

    </StyledTextBox>

  );

}

Answer 1

像其他评论者一样，我可以很清楚你报告的错误，但对我来说这听起来像是一个box-sizing问题。通过https://k7ywy.codesandbox.io/查看呈现的 DOM 时，我们可以看到box-sizing:border-box它没有应用于包装元素或内部元素，但它已在您粘贴在问题中的代码段中得到修复。我注意到一些我会质疑的事情。为什么不适box-sizing用于一切？通常在处理width:100%;and&nbsp;padding/&nbsp;border/时margin，它会让生活变得更轻松！在我的示例中，我将其从 JS 中删除并使用 CSS 文件应用它。为什么你display:flex在多个地方使用但没有分配任何其他与 flex 相关的属性？尝试从const InputBox = styled.span和中删除它const StyledKeyboard = styled.span

Answer 2

只需将背景无或透明应用于输入字段，这将解决边框问题.muXee{&nbsp; &nbsp; background-color: transparent;//OR background:none}

Answer 3

一个很好的简单方法是给box-sizing: border-box父元素。为了安全起见，您可以在根组件级别执行此操作：* {&nbsp; ...;&nbsp; box-sizing: border-box;}