Solution 1 :

You’ve not given the HTML a DOCTYPE, so the normal CSS rules are modified by the page being rendered in quirks mode.

This effect you see is described in the Quirks Mode Living Standard

3.5. The percentage height calculation quirk

In quirks mode, for the purpose of calculating the height of an
element element, if the computed value of the position property of
element is relative or static, the specified value for the height
property of element is a <percentage>, and element does not have a
computed value of the display property that is table-row,
table-row-group, table-header-group, table-footer-group, table-cell or
table-caption, the containing block of element must be calculated
using the following algorithm, aborting on the first step that returns
a value:

  1. Let element be the nearest ancestor containing block of element, if
    there is one. Otherwise, return the initial containing block.

  2. If element has a computed value of the display property that is
    table-cell, then return a UA-defined value.

  3. If element has a computed value of the height property that is not
    auto, then return element.

  4. If element has a computed value of the position property that is
    absolute, or if element is a not a block container or a table
    wrapper box, then return element.

  5. Jump to the first step.

Following this algorithm through, and taking into account the quirks rules 3.6. The html element fills the viewport quirk and 3.7. The body element fills the html element quirk you’ll see that the 100% height of the .box elements is 100% of the computed height of the body element, which is 100% of the height viewport less the default margins that the body element has.

Codepen automatically adds the DOCTYPE to your mark-up, so the above quirks mode rules do not apply. Instead, the height of the .box elements is determined by the normal CSS rules for percentage heights, which states that in your case “the used height is calculated as if ‘auto’ was specified”, and then 10.6.3 Block-level non-replaced elements in normal flow when ‘overflow’ computes to ‘visible’ which says the height is the height of the element’s content.

Problem :

What is the defined behavior if the parent height is auto and 2 children with height:100% are placed below each other in it. For example:

        .cont {
            height: auto;
        .box {
        <div class="cont">
            <div class="box" style="background-color:yellow;"> a </div>
            <div class="box" style="background-color:red;"> b </div>

In Chrome and Firefox the children are (more or less) screen-sized but in CodePen their height fits the content.