Height Calculation By Browsers : Containing Blocks and Children

Picked up this in SO itself - the 'height calculation' made by browsers (when we have not explicitly set a height but we have set a min-height) for a container that has children (who have height in percentages with respect to the container):

Without setting a height, I set min-height and it doesn't work- note that the computed value of height is the value I gave for min-height. The children do not get 50% height that I have given them - see below:

    * {
          box-sizing: border-box;
        }
        .inline-container,
        .block-container,
        .float-container,
        .inline-block-container {
          border: 1px solid red;
          min-height: 100px;
        }
        .inline-container > * {
          border: 1px solid;
          height: 50%;
        }
        .block-container > * {
          border: 1px solid;
          height: 50%;
        }
        .float-container > * {
          float: left;
          border: 1px solid;
          height: 50%;
        }
        .float-container:after {
          clear: both;
          content: '';
          display: block;
        }
        .inline-block-container > * {
          display: inline-block;
          border: 1px solid;
          height: 50%;
        }

    <body>
          <div class="inline-container">
            <span>Inline 1</span>
            <span>Inline 2</span>
          </div>
          <div class="block-container">
            <div>Block 1</div>
            <div>Block 2</div>
          </div>
          <div class="float-container">
            <div>Float 1</div>
            <div>Float 2</div>
            <div>Float 3</div>
          </div>
          <div class="inline-block-container">
            <div>Inline block 1</div>
            <div>Inline block 2</div>
            <div>Inline block 3</div>
          </div>
        </body>

Now I set height: 0 it works! See example below:

    * {
          box-sizing: border-box;
        }
        .inline-container,
        .block-container,
        .float-container,
        .inline-block-container {
          border: 1px solid red;
          min-height: 100px;
          height: 0;
        }
        .inline-container > * {
          border: 1px solid;
          height: 50%;
        }
        .block-container > * {
          border: 1px solid;
          height: 50%;
        }
        .float-container > * {
          float: left;
          border: 1px solid;
          height: 50%;
        }
        .float-container:after {
          clear: both;
          content: '';
          display: block;
        }
        .inline-block-container > * {
          display: inline-block;
          border: 1px solid;
          height: 50%;
        }

    <body>
          <div class="inline-container">
            <span>Inline 1</span>
            <span>Inline 2</span>
          </div>
          <div class="block-container">
            <div>Block 1</div>
            <div>Block 2</div>
          </div>
          <div class="float-container">
            <div>Float 1</div>
            <div>Float 2</div>
            <div>Float 3</div>
          </div>
          <div class="inline-block-container">
            <div>Inline block 1</div>
            <div>Inline block 2</div>
            <div>Inline block 3</div>
          </div>
        </body>

Question:

So my question is- what is happening here- I am really surprised! Why the children are not respecting the computed height of the containing block when I give it a min-height. Can you guys look into this?

Solution 1:

The height CSS property on MDN:

Percentages

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

In 1., the height attribute of the parent isn't explicitly specified, therefore the value computes to auto.

In 2., the height attribute is specified and therefore it's calculated with respect to the parent

Height Calculation By Browsers : Containing Blocks and Children

Solution 1:

Related

Recent Posts