Flexbox填充和边框在子元素

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制作）

BUT 当您删除此部分时，看起来问题会自行解决

.samples .sample {
  padding: 50px;
}  

从代码

，从而删除sample包装器的填充。

BUT2 它应该对其他容器内的元素没有任何影响，是吗？

它认为它应该与box-sizing: border-box相关，但是我无法理解为什么子元素以这种奇怪的方式运行，因为它应该正确地具有198px的高度并且在它之后不留空空间。 / p>

这背后的想法是什么，有人可以解释一下吗？

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

链接