在过去的几个小时里,我一直在努力解决以下问题:
我有两个 div
元素包裹在一个容器中,容器本身包裹在多个其他 div 中。
容器 div
有 display:flex
。
我创建了一个托管在 codepen 上的最小代码示例包含此处列出的相同代码
<div class="samples">
<div class="sample">
<div class="flex-parent">
<div class="div1">
<div>I'm div 1</div>
</div>
<div class="div2">I'm div 2</div>
</div>
</div>
</div>
CSS 代码非常简单。我希望第一个元素是 其内容的大小和第二个增加剩余宽度的大小
* {
box-sizing: border-box;
}
.samples {
background: #2B2B2B;
}
.samples .sample {
padding: 50px;
}
.flex-parent {
border: 1px dashed green;
display: flex;
height: 100px;
}
.flex-parent .div1 {
flex-shrink: 0;
background-color: #D3394C;
}
.flex-parent .div2 {
flex-grow: 1;
}
但令人惊讶的问题是第一个元素在高度方面没有完全扩展,并且在他之后留下了一个空白像素空间,如下图所示(由 codepen 制作)
但是 看起来问题在您删除此部分后自行解决
.samples .sample {
padding: 50px;
}
从代码中删除 sample
包装器的填充。
BUT2 它不应该对其他容器内的元素有任何影响,不是吗?
它认为它应该与 box-sizing: border-box
有关,但我不明白为什么子元素的行为如此奇怪,因为它应该正确地具有 198px 的高度并且后面不要留空。
这背后的想法是什么,有人可以解释一下吗?
EDIT1:看起来这个问题只存在于最新版本的桌面版 Chrome (65.0.3325.181) 和 Edge (41.16299.248.0)
EDIT2:在旧版 Chrome (42) 上,它按预期工作。
最佳答案
问题出在我的显示缩放比例为 125% 时,产生了差距。将它恢复到 100% 解决了它。 chrome 和 edge 引擎内部肯定有一些问题(因为它在 Firefox 中运行良好)。
有关更多信息,请点击链接 https://github.com/electron/electron/issues/8332
关于css - Flexbox Padding 和 Border 在子元素后生成一个空像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49467552/