1

I have a markup like the following:

<div id="red">
    <div id="yellow">
        alot of text
    </div>
</div>
<div id="blue">
</div>

I can't get yellow to take 100% of red's height, it only takes 100% of the window even if red is overflowing. It works if I set red's display to block, but I need flex...

#red {
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  width: 100px;
  background-color: red;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
}

#yellow {
  display: flex;
  flex-grow: 1;
  background-color: yellow;
}

#blue {
  background-color: blue;
}
Bob
  • 5,809
  • 5
  • 36
  • 53

2 Answers2

1

Why not apply the overflow to yellow instead of red?

#red {
  position: fixed;
  height: 100vh;
  width: 100px;
  background-color: red;
  display: flex;
  flex-direction: column;
}

#yellow {
  display: flex;
  overflow-y: scroll;
  background-color: yellow;
}

#blue {
  background-color: blue;
}

body {
  margin: 0;
}
<div id="red">
  <div id="yellow">
    Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
    et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
    aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut
    risus. Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.
  </div>
</div>
<div id="blue"></div>

Here's a link that may shed some light:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    sorry, it was a typo, not yellow's but red's display to block, also applying overflow to yellow worked! tnx! – Bob Sep 08 '17 at 16:02
0

The yellow element actually takes 100% of your red element. The overflowing text does not cause your elements to change the size. You should remove height: 100% from #red and use min-height: 100% instead.

D B
  • 534
  • 3
  • 14