I have a functional layout in place. My goal is to add a vertical scrollbar exclusively for the .gallery-items element, without causing overflow in the .split-panel container.
However, when I attempted to include flex-direction: column to .pane-2, it disrupted the layout unexpectedly.
This leads me to question why this unexpected behavior occurs.
From my understanding, there should be no difference between using flex-direction: row and flex-direction: column when dealing with 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>