html { height: 50%;}body { height: 100%; margin: 0;}.container { border: 1px solid green; width: 50px; height: 100%; display: flex; flex-direction: column;}.item-1 { border: 1px solid blue; min-height: 0; overflow: auto; display: flex; flex-direction: column;}.item-2 { border: 1px solid yellow; display: flex; flex-direction: column;}<div class="container"><div class="item-1"><div class="item-2"><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span><span>Text</span></div></div></div>There is content inside .item-2 whose height is more than that .container has. To prevent vertical overflowing I set min-height: 0; and overflow: auto; to its parent .item-1.
And that seemingly works. .container and .item-1 share the same height, and item-2 has that corresponding to its content overflowing the parent with the scroll functionality provided.
However, why if we bring those properties from .item-1 to .item-2 the picture will become different? I mean in this case, .item-1 will get the .item-2 height value then overflow .container and there will be no scroll bar.
How are these two cases different?