flex-direction：单个孩子的“列”与“行”

Question

I have the following working layout. I want a vertical scrollbar only for .gallery-items element. The layout should not overflow .split-panel container.

Accidentally, I found that adding flex-direction: column to .pane-2 breaks the layout.

So, the question is why does this happen?

As I understand, there should be no difference between flex-direction: row and flex-direction: column if there is only one child element.

 body { margin: 0; }.split-panel { height: 100vh; display: flex; flex-direction: column; }.pane-2 { overflow: hidden; display: flex; /* flex-direction: column; */ }.gallery { display: flex; flex-direction: column; }.gallery-items { display: flex; flex-wrap: wrap; overflow-y: auto; }.item { background: teal; width: 200px; height: 200px; margin: 10px; display: flex; }

 <div class="split-panel"> <div class="pane-1">Content</div> <hr /> <div class="pane-2"> <div class="gallery"> <div class="toolbar"> <h1>Title</h1> </div> <div class="gallery-items"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> </div> </div> </div> </div>

Answer 1

Because the column direction is pushing the gallery element height to fit its content. If you set it to be explicitly 100% it works.

 body { margin: 0; }.split-panel { height: 100vh; display: flex; flex-direction: column; }.pane-2 { overflow: hidden; display: flex; flex-direction: column; }.gallery { display: flex; flex-direction: column; height: 100%; // <-------------------- }.gallery-items { display: flex; flex-wrap: wrap; overflow-y: auto; }.item { background: teal; width: 200px; height: 200px; margin: 10px; display: flex; }

 <div class="split-panel"> <div class="pane-1">Content</div> <hr /> <div class="pane-2"> <div class="gallery"> <div class="toolbar"> <h1>Title</h1> </div> <div class="gallery-items"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> </div> </div> </div> </div>