CODEWITHSUNDEEP
htmlcssflexboxcss-position
Bob
Bob

Reputation: 6173

Why can a flex item take full height in a fixed-position flex container, unless the item has display: flex applied?

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;
}

Upvotes: 1

Views: 72

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372059

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:

Upvotes: 1

D B
D B

Reputation: 532

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.

Upvotes: 0

Related Questions