部分 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没有应用于包装元素或内部元素，但它已在您粘贴到问题中的代码段中修复。

我注意到一些我会质疑的事情。

1. 为什么不适box-sizing用于一切？通常在处理width:100%;和padding/ border/ 时margin，它让生活变得更轻松！
   在我的示例中，我将它从 JS 中删除并使用 CSS 文件应用它。

2. 为什么你display:flex在多个地方使用但没有分配任何其他与 flex 相关的属性？
   尝试从const InputBox = styled.span和删除它const StyledKeyboard = styled.span

这能帮你解决吗？沙盒示例。渲染输出。