Flexbox:滚动条是从哪里来的?

Question

我正在学习flexx。有人能解释一下外部滚动条是从哪里来的，它是如何正确的?

https://stackblitz.com/edit/web-platform-ug7ncu?file=index.html

<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
<div style="flex: 1 0 auto;">
<div>something</div>
</div>
<div style="flex: 1 0 auto; height: 100%">
<div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
<div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<!--<div style="flex: .."></div>-->
</div>
</div>
</div>

Answer 1

具有方向列的flex容器有两个子元素，一个具有100%的高度，另一个具有其内部文本的高度，加起来比父元素的高度高，并产生外部滚动条

一步一步地从外到内，不要添加属性，除非你确定它们的作用，因为我看到你到处撒高度，宽度和flex: 10 auto，这只会让你困惑，添加最小值，只有在他们做你想做的事情时才添加额外的值。

html, body {
height: 100%;
}
body {
margin: 0;
}

<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
<div style="flex: 1 0 auto;">
<div>something</div>
</div>
<div style="overflow: auto">
<div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
<div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<!--<div style="flex: .."></div>-->
</div>
</div>
</div>

在这个例子中，我删除了所有不必要的样式。

100%的高度没有任何作用，因为100%的高度意味着父元素的100%，而父元素在这个例子中是body，它没有设置高度，所以我必须将它的高度设置为100%，为了使100%有效，它的父元素也需要相同的高度，也就是html标签。

另一种方法是将高度设置为100vh，这是视口的高度，但它有一些副作用，所以坚持高度100%更好。