Thu. Jun 1st, 2023

[ANSWERED] html – flex-direction: “column” vs “row” for single child

By

Nov 19, 2022 css, flexbox, html

Solution 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>

Problem :

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>

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022