部分 div 边框被切断答案

【问题标题】：Parts of div border being cut off部分 div 边框被切断
【发布时间】：2020-03-23 12:16:30
【问题描述】：

我有一个容器元素，其中包含一些其他元素，但根据屏幕大小，它们的某些部分在各个部分莫名其妙地被切断了。当 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>
  );
}

【问题讨论】：

嗨 Perplexityy，你能提供一个截图吗？我似乎无法重现，或者我没有完全理解帖子中的问题。
我添加了一张图片。我遇到的问题是容器元素干扰了外部边界。无论我在其中添加什么，我都希望它始终是一个稳定的渲染。
沙盒中的代码与您在此处发布的代码不同，并且两个版本都没有显示图像中的行为（检查了 Chrome 和 Firefox 调整窗口大小）。
我无法复制。您使用的是什么操作系统和浏览器？
您的 StyledTextBox 组件仅包含 UserInput 组件，正如我在沙箱中看到的那样。此外，如果您为 UserInput 组件着色以便可以看到它，则似乎没有任何内容被切断，一切正常。

标签： javascript css reactjs

【解决方案1】：

与其他评论者一样，我可以很清楚您报告的错误，但对我来说，这听起来像是一个box-sizing 问题。通过https://k7ywy.codesandbox.io/ 查看渲染的DOM 时，我们可以看到box-sizing:border-box 没有应用于包装元素或内部元素，但它已在您粘贴在问题中的sn-p 中得到修复。

我注意到一些问题。

为什么不将box-sizing 应用于所有内容？通常在处理width:100%; 和padding/border/margin 时，它让生活变得轻松多了！
在我的示例中，我将其从 JS 中删除并使用 CSS 文件应用它。
为什么你在多个地方使用 display:flex 却没有分配任何其他与 flex 相关的属性？
尝试从 const InputBox = styled.span 和 const StyledKeyboard = styled.span 中删除它

这能解决你的问题吗？ Sandbox example。 Rendered output.

【讨论】：

在您的屏幕截图中，右侧边框明显比底部边框薄。
我离开并支持你的帖子，我希望你能得到至少一半的赏金。

【解决方案2】：

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

.muXee{
    background-color: transparent;
//OR background:none
}

【讨论】：

【解决方案3】：

这是一个盒子大小的问题。你可以阅读更多here。我还建议您不要使用display: flex。也许尝试将背景颜色更改为透明？希望这会有所帮助！

【讨论】：

【解决方案4】：

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

* {
  ...;
  box-sizing: border-box;
}

【讨论】：