css - Flexbox Padding 和 Border 在子元素后生成一个空像素

Question

在过去的几个小时里，我一直在努力解决以下问题:

我有两个 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) 上，它按预期工作。

Answer 1

问题出在我的显示缩放比例为 125% 时，产生了差距。将它恢复到 100% 解决了它。chrome 和 edge 引擎内部肯定有一些问题(因为它在 Firefox 中运行良好)。

有关更多信息，请点击链接 https://github.com/electron/electron/issues/8332