Why do percentage heights work on children when a parent does not have a certain height?

Question

I use Bootstrap 4 for simplicity.

My questions:

• Why set a 100% height for a child element ( .inner ) of a flexible element? For each element of this code, the height is "set" to auto .
• How do .inner elements know that 100% height is the height of the heaviest flexible child ( .col-4 ) in a row?

CODEPEN

HTML:

 <div class="container"> <h3>Without 100% height on inner elements</h3> <div class="row"> <div class="col-4"> <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> </div> <div class="col-4"> <div class="inner">Inner</div> </div> <div class="col-4"> <div class="inner">Inner</div> </div> <div class="col-4"> <div class="inner">Inner</div> </div> <div class="col-4"> <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> </div> <div class="container"> <h3>With 100% height on inner elements</h3> <div class="row"> <div class="col-4"> <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> </div> <div class="col-4"> <div class="inner h-100">Inner</div> </div> <div class="col-4"> <div class="inner h-100">Inner</div> </div> <div class="col-4"> <div class="inner h-100">Inner</div> </div> <div class="col-4"> <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> </div> 

CSS

 .inner { background: #ddd; } h-100 { height: 100%; } 

Answer 1

Why set 100% height for a child ( .inner ) flex element? For each element in this code, height "set" to auto .

Since the beginning of CSS in the 1990s, the percentage height of the child in the stream has required a certain height in the parent. Otherwise, the default child element is height: auto .

The only valid height for the parent comes from the height property. Other forms of height, such as min-height and max-height , are not allowed for this purpose.

Although the specification never explicitly indicated that the parent should use the height property - only the general "height" height is used - using the height property has become the traditional interpretation and the prevailing implementation in browsers.

However, in recent years, browsers have expanded their interpretation of the specification language to include other forms of height, such as flex-basis .

So, in 2017, it is not surprising that height: 100% does not allow height: auto in all cases where the parent does not have the specified height .

Today, browsers can also look for a height reference from flex-grow , flex-basis , align-items or something else.

Here is some more information about the height properties and percentages:

• Why doesn't percentage height work on my div?
• Chrome / Safari does not fill 100% of the height of the flexible parent
• Why does my div height of 100% only work when deleting a DOCTYPE?

And then the interventions :

The intervention is that the user agent decides to deviate slightly from the standardized behavior to provide a significantly enhanced user interface.

These are browser makers, mostly saying, "Thanks for the spec guide, but we know our users and we can do better." So they leave - the script, hoping to be more thoughtful and intuitive.

Here are some examples of possible Chrome interventions:

• Why is the flex element not compressed to the size of the content?
• the pseudo-element does not align in the upper left corner
• How to make images within css grid container lines?
• Google associated with Google Chrome viewport with flexbox

Thus, between interventions and a broader interpretation of height: 100% rules can give full height, even if the parent does not have height .

How do .inner elements know that 100% height is the height of the highest flex child ( .col-4 ) in a row?

They do not do this. They simply stretch to the height of the container, the height of which is set by the highest element in the row.