Flexbox: Where does the scrollbar comes from?-CodePudding

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>

CodePudding user response：

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.