CODEWITHSUNDEEP
css
fweth
fweth

Reputation: 685

How Exactly Is The Containing Block Determined

I still have troubles to understand how elements choose their containing block, with respect to which their relative values of e.g. height are evaluated.

body {
  margin: 0;
}

.outer {
  min-height: 200px;
  background: red;
  overflow: hidden;
}

.inner {
  height: 100%;
  background: green;
}
<div class="outer">
  Hello,
  <div class="inner">world!</div>
</div>

Here the outer container has only a min-height set, which is apparently not enough to assert itself as containing block, even with overflow hidden.

My understanding was that without overflow hidden, there is a cyclic dependency, as the parent size depends on the child size when the child is higher than 200 px, but with overflow hidden that cyclic dependency should be gone.

What's even weirder, it starts 'working' again when I set the body to display flex.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.outer {
  min-height: 200px;
  background: red;
  overflow: hidden;
}

.inner {
  height: 100%;
  background: green;
}
<div class="outer">
  Hello,
  <div class="inner">world!</div>
</div>

What is the logic behind that?

Upvotes: 1

Views: 567

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

First, the containing block in both cases is the same for inner and it's outer. overflow play no role here, same for the usage of flexbox. More detail: https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

Now, you need to understand the trickery around percentage height. The general rule is: "the containing block need to have an explicit height"

Specifies a percentage height. 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'. ref

Considering this, you can assume that your percentage height will fail in both cases BUT things have changed and now we can resolve percentage height in some particular cases where we don't have any explicit height defined on the containing block.

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially: ref

If you keep reading, you will find a lot of complex concept and definition not easy to understand. I will not detail all of them but your second case is one of them.

To make it easy: Flexbox force some sizes to be definite allowing percentage height to be resolved (https://drafts.csswg.org/css-flexbox-1/#definite-sizes).

There are more cases like that related to flexbox and CSS grid as well:

Percentage 'min-height' works only when element has indirect parent with 'display: flex'

Why does `height: 100%` value 'work' for child tags of grid-items?

https://stackoverflow.com/a/52137966/8620333

Upvotes: 2

Related Questions