Why height=100% doesn't work?

Question

I use a third-party component that occupies all the available space, ie width=100% and height=100% . I don't have control over it.

I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space).

Why? How would you fix that?

 .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { flex-grow: 1; background-color: rgba(0, 255, 0, 0.5); } .third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5); } 

 <div class="container"> <div class="header">Header</div> <div class="content"> <div class="third-party-component"> Third party component </div> </div> </div> 

Answer 1

In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute , or the height will be computed as auto .

Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.

The problem with adding absolute to the content , it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.

Stack snippet

 .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { position: relative; /* added */ flex-grow: 1; background-color: rgba(0, 255, 0, 0.5); } .wrapper { position: absolute; /* added */ left: 0; /* added */ top: 0; /* added */ right: 0; /* added */ bottom: 0; /* added */ } .third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5); } 

 <div class="container"> <div class="header">Header</div> <div class="content"> <div class="wrapper"> <div class="third-party-component"> Third party component </div> </div> </div> </div> 

---

Another option could be to update the Flexbox properties, to give the content a height, using flex: 1 1 100% and give header flex-shrink: 0; so it doesn't shrink (as content got 100%).

This might not work on Safari though, as I know it have had issues when the height property is not set, though can't test that now as I don't have access to Safari.

 .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; flex-shrink: 0; background-color: rgba(255, 0, 0, 0.5); } .content { flex: 1 1 100%; background-color: rgba(0, 255, 0, 0.5); } .third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5); } 

 <div class="container"> <div class="header">Header</div> <div class="content"> <div class="third-party-component"> Third party component </div> </div> </div> 

Answer 2

Because .content haven't height (height = 0px) and .third-party-component have 100% of 0px. You can add propety height : calc (100% - <height of .header>) into .content

 .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { height: calc(100% - 18px); flex-grow: 1; background-color: rgba(0, 255, 0, 0.5); } .third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5); } 

 <div class="container"> <div class="header">Header</div> <div class="content"> <div class="third-party-component"> Third party component </div> </div> </div> 

Answer 3

You can simply use another flex container in the .content element:

 .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { flex-grow: 1; display: flex; flex-direction: column; background-color: rgba(0, 255, 0, 0.5); } .third-party-component { flex-grow: 1; height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5); } 

 <div class="container"> <div class="header">Header</div> <div class="content"> <div class="third-party-component"> Third party component </div> </div> </div>