How do percentages and intrinsic sizing interact?

A percentage is not an absolute size. It depends on the containing block, and different properties use different axes. Width resolves against the containing block width. Height resolves against the containing block height, but only when that height is definite.

.wrap {
  width: 60rem;
}

.half {
  width: 50%;
  padding: 5%;
}

.fill {
  height: 100%;
}

Why percentages fail

• A percentage height needs a parent with a definite height; auto does not provide one
• Percentage padding and margin on both axes resolve against the containing block's inline size
• Percentage widths can overflow when padding and border are added under content-box
• min-content is the smallest size without overflow; max-content is the size with no wrapping
• fit-content clamps between the available size and the content's preferred size

The height: 100% chain problem is a classic. If every ancestor has auto height, the percentage cannot resolve. Using flex or grid on the parent, or setting a definite height, fixes it more reliably than repeating height: 100% up the tree.