如果容器是flex并且item2有overflow，容器将渲染为期望的大小，并且溢出滚动条可见。
.Flex_container {
width: 300px;
height: 100px;
display: flex;
flex-direction: column;
}
.item1 {
color: white;
background-color: black;
}
.item2 {
color: white;
background-color: brown;
overflow: auto;
}
<div class="Flex_container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
</div>
<div class="item2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
</div>
</div>
但是当我不应用flexbox时，overflow似乎不起作用。容器似乎更适应内容。我想知道为什么。我正准备学习CSS。而且我无法从脑海中摆脱这个问题。
.container {
width: 300px;
height: 100px;
}
.item1 {
color: white;
background-color: black;
}
.item2 {
color: white;
background-color: brown;
overflow: auto;
}
<div class="container">
<div class="item1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
</div>
<div class="item2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
</div>
</div> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
容器没有适应内容。它保持了您给定的高度。
但是子元素的高度没有受到限制，因此它们会变大以适应内容，并且由于父元素没有设置overflow-y为hidden，所以它们可以被看到。
这里有一个示例，其中两个子元素具有稍微透明的背景，这样您就可以看到父元素的背景，并且在这种情况下，它在第二个子元素下方稍微结束。
.container { width: 300px; height: 100px; background: magenta; } .item1 { color: white; background-color: rgba(0, 0, 0, 0.4); } .item2 { color: white; background-color: rgba(0, 0, 255, 0.4); overflow: auto; }<div class="container"> <div class="item1"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p> </div> <div class="item2"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p> </div> </div>