Flexbox: Where does the scrollbar comes from?

Question

I am just learning flexbox. Could someone explain where the outter scrollbar comes from and how it would be correct?

https://stackblitz.com/edit/web-platform-ug7ncu?file=index.html

<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
    <div style="flex: 1 0 auto;">
      <div>something</div>
    </div>

    <div style="flex: 1 0 auto; height: 100%">
      <div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
        <div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
        </div>
        <!--<div style="flex: .."></div>-->
      </div>
    </div>
  </div>

Kareem Kamal · Accepted Answer · 2021-09-25T20:29:10.160

The flex container that has the direction column has two child elements, one has height 100% and the other has the height of the text inside it, adding up to more height than their parent and causing the outer scrollbar.

Take it step by step from outside to inside, don't add properties unless if you're sure about what they do, because I see you sprinkle height, width and flex: 1 0 auto everywhere, this will just confuse you, add the bare minimum and only add extra values if they do something that you want.

html, body {
  height: 100%;
}

body {
  margin: 0;
 }

<div style="display: flex; flex-direction: column; width: 100%; height: 100%;flex: 1 0 auto;">
    <div style="flex: 1 0 auto;">
      <div>something</div>
    </div>

    <div style="overflow: auto">
      <div style="display: flex; width: 100%; height: 100%;flex: 1 0 auto;">
        <div style="flex: 1 0 auto;overflow: auto; height: 100%; background-color: black">
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
        </div>
        <!--<div style="flex: .."></div>-->
      </div>
    </div>
  </div>

in this example, I removed all the unnecessary styles.

The 100% height does nothing, because 100% height means 100% of the parent, while the parent which is the body in this case has no set height, so I had to set its height to 100%, and for that 100% to work its parent needs the same too which is the html tag.

another way is to set the height to 100vh, which is the height of the viewport, but it has a few side effects so sticking to height 100% is better.

It would be good if you can keep my structure because i have ripped it off from my code. The second row of the flexbox contains a nested flexbox (having the "x" part and an at the bottom). That's where the complexity comes from. I couldn't adapt yours. — NoobieNoob, Sep 25 '21 at 20:23
updated, left everything as is and only added css + changed one line to `
` — Kareem Kamal, Sep 25 '21 at 20:29
Does your solution work here too? https://stackoverflow.com/questions/69331003/flexbox-div-is-missing — NoobieNoob, Sep 26 '21 at 00:36

Flexbox: Where does the scrollbar comes from?

1 Answers1