CODEWITHSUNDEEP
htmlcss
Magnus
Magnus

Reputation: 7839

Extrinsic Size Determination (CSS Intrinsic & Extrinsic Sizing Module Level 3)

In the Extrinsic Size Determination chapter of the CSS Intrinsic & Extrinsic Sizing Module Level 3 specification, we can read:

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 containing block’s size, the percentage behaves as auto. Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents:

  • If the cyclic dependency was introduced due to a block-size or max-block-size on the containing block that causes it to depend on the size of its contents, the box’s percentage is not resolved and instead behaves as auto.

  • Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).

And:

Note: These rules specify the previously-undefined behavior of this cyclic case in CSS2§10.2. Note also, the behavior in CSS2§10.5 is superseded in their respective specifications for layout modes (such as flex layout) not described in CSS2.

So, assuming horizontal-tb writing-mode, we know from the first bullet that percentage height (aka. block-size) of child is set to auto, if parent size is based on child (i.e. they form a cyclical definition).

Then, the second bullet says that percentage is actually resolved for cyclical widths. So, in the case of width (which unlike height, was undefined in CSS2 in cyclical cases), it should be resolved as a percentage.

My Question For the second bullet, how is it possible to resolve width as a percentage, when it is cyclical? Percentage of what containing block size?

EDIT

In the examples it shows that width also becomes auto, which makes me wonder if it was a typo that the auto transformation rule should only apply to block size (aka. height in horizontal-tb writing-mode)

Upvotes: 0

Views: 297

Answers (1)

BoltClock
BoltClock

Reputation: 724452

For the second bullet, how is it possible to resolve width as a percentage, when it is cyclical? Percentage of what containing block size?

Refer back to the first paragraph of the first quote, which contains this sentence:

When calculating the containing block’s size, the percentage behaves as auto.

This first step is crucial. There's no way to determine the size of the containing block except by giving the content an arbitrary size. That size is auto. However for the sake of consistency the width of the content is then calculated as the specified percentage, the percentage itself based off of this freshly calculated containing block size.

This has been the interoperable behavior of browsers for years and years now, so nothing really has changed except that the behavior is now specified.

Upvotes: 2

Related Questions