CODEWITHSUNDEEP
htmlcssflexbox
dhmk083
dhmk083

Reputation: 271

flex-direction: "column" vs "row" for single child

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>

Upvotes: 0

Views: 552

Answers (1)

Periplo
Periplo

Reputation: 432

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>

Upvotes: 1

Related Questions