div边框的一部分已被切断

9

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

javascript css reactjs

— 困惑
source

4

嗨，困惑，您能提供一张屏幕截图吗？我似乎无法复制，或者我无法从帖子中完全理解问题。

— Gleb Kost

我添加了一张图片。我遇到的问题是容器元素正在干扰外部边界。无论我放置什么内容，我都希望它是一致的渲染。

— 困惑

2

沙箱中的代码与您在此处发布的代码不同，并且两个版本均未在图片中显示该行为（选中了Chrome和Firefox来调整窗口大小）。

— NevNein

4

我无法复制。您正在使用什么操作系统和浏览器？

— BDawg

2

正如我在沙箱中看到的那样，您的StyledTextBox组件仅包含UserInput组件。另外，如果您为UserInput组件上色，以便可以看到它，则似乎没有任何中断，一切正常。

— 莱昂·武科维奇

5

像其他评论者一样，我可以很清楚地指出您所报告的错误，但对我来说听起来像是 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

这为您解决了吗？沙箱示例。渲染输出。

— 杰森·莱登
source

在屏幕截图中，右边框比底边框明显更细。

— 困惑

我离开并投票支持您的职位，希望您至少得到一半的奖金。

— AmerllicA

0

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

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

— KGKGUPTA
source

0

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

0

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

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

— 青睐乔治
source