部分 div 边框被切断

Question

我有一个容器元素，其中包含一些其他元素，但根据屏幕大小，它们的某些部分在各个部分莫名其妙地被切断了。当 HTML 页面的宽度调整（通过单击并拖动它）时，您可以在我的代码沙箱链接上观察行为。如何确保只渲染主容器边框，而子元素没有任何影响？https://codesandbox.io/s/focused-tree-ms4f2import 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%;and padding/ border/时margin，它会让生活变得更轻松！
   在我的示例中，我将其从 JS 中删除并使用 CSS 文件应用它。

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

Answer 2

只需将背景无或透明应用于输入字段，这将解决边框问题

.muXee{

    background-color: transparent;

//OR background:none

}

Answer 3

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

* {

  ...;

  box-sizing: border-box;

}