If the container is flex and item2 has overflow, the container will be rendered to the desired size and the overflow scrollbar will be visible.
.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; } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei
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.
But when I don't apply flexbox, overflow doesn't seem to work. Containers seem to be more adaptable to content. I want to know why. I'm getting ready to learn CSS. And I couldn't get this question out of my head.
.container { width: 300px; height: 100px; } .item1 { color: white; background-color: black; } .item2 { color: white; background-color: brown; overflow: auto; } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The container has no adapted content. It maintains the height you give it.
But the height of the child elements is not limited, so they become larger to fit the content, and since the parent element does not set overflow-y to hidden, they can be seen.
Here is an example where two child elements have a slightly transparent background so that you can see the background of the parent element and in this case it ends slightly below the second child element.
.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; }