javascript - div边框的一部分已被 chop

我有一个包含其他元素的容器元素，但是根据屏幕尺寸的不同，它们的各个部分会被莫名其妙地切除。当调整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>
  );
}

最佳答案

像其他评论者一样，我可以完全确定您要报告的错误，但是在我看来，这像是box-sizing问题。通过https://k7ywy.codesandbox.io/查看呈现的DOM时，我们可以看到box-sizing:border-box并未应用到wrapper元素或内部元素，但已固定在您粘贴在问题中的代码段中。

我注意到我想问的几件事。

为什么不对所有内容应用box-sizing？通常，当处理width:100%;和padding/border/margin时，它使生活变得更加轻松!
在我的示例中，我从JS中删除了它，并使用CSS文件应用了它。

为什么要在多个地方使用display:flex而不使用其他与flex相关的属性？
尝试从const InputBox = styled.span和const StyledKeyboard = styled.span

中删除它

这为您解决了吗？ Sandbox example。 Rendered output。