1

I have a flexbox with 2 rows. In the second row I have a flexbox with 2 columns and the second column becomes scrollable when the content overflows. However, when it becomes scrollable, the document becomes scrollable also (a tiny bit - as if the first row's height is added to the document's height).

I have set 100% heights to all parents and debugged a lot but couldn't fix this. I can't see what's going wrong.

I duplicated the issue in this Js Bin: https://jsbin.com/lesoledoqo/1/edit?html,output

Any ideas?

Code:

<html style="height: 100%;">

<body style="height: 100%; padding: 0; margin: 0;">
   <div style="display: flex; flex-direction: column; height: 100%;">
      <div style=" background-color: gray">
         Content 1
      </div>
      <div style="display: flex; background-color: green; height: 100%;">
         <div style="background-color: blue;">
            Content 2.1
         </div>
         <div style="background-color: yellow; height: 100%; overflow-y: auto;">
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2
         </div>
      </div>
   </div>
</body>

</html>
claudiut
  • 1,643
  • 4
  • 15
  • 20
  • 1
    Add `min-height: 0` to the nested flex container. https://jsbin.com/ruzukeroda/edit?html,output – Michael Benjamin Nov 16 '21 at 19:21
  • @MichaelBenjamin thank you, that worked! I've also read the duplicate question's answer which provides this solution. However, could you elaborate a bit why did the second row's min-height grow bigger when the yellow row's scrollbar appeared? – claudiut Nov 17 '21 at 06:20

1 Answers1

0

There is nothing wrong with the code and its behaviour, it's working as coded.

If you want a scroll bar on second row's column only NOT on the entire document, then do it this way -

  1. give some fixed height to first row, let's say 40px
  2. and then give 100vh - 40px height to the second row, using CSS's calc() method.

vh - view height

Demo Here

height: calc(100vh - 40px);
Shyam Joshi
  • 830
  • 7
  • 18
  • Thanks. However, I would avoid this if possible because I want to keep the first row's height flexible – claudiut Nov 17 '21 at 06:05