Skip to content

[css-sizing][css-contain] Are intrinsic sizing keywords definite with size containment? #7206

@Loirooriol

Description

@Loirooriol

https://andreubotella.com/csswg-auto-build/css-sizing-3/#definite

A size that can be determined without performing layout

So if I have something like

<div style="height: auto; contain: size; border: solid">
  <div style="height: 50%; background: cyan;">a</div>
</div>
<br><br>
<div style="height: auto; contain: size; contain-intrinsic-size: 100px; border: solid">
  <div style="height: 50%; background: cyan;">a</div>
</div>

Should the inner elements resolve 50% to 0px and 50px?

Browsers seem to treat the percentage as cyclic so it behaves as auto, i.e. they don't consider the parent's height: auto as definite. But we can determine the size without performing layout.

https://andreubotella.com/csswg-auto-build/css-contain-2/#sizing-as-if-empty

The used width and height of the containment box are determined as if performing a normal layout of the box, except that it is treated as having no content

Does this mean that no content is marked as having a cyclic percentage?

https://andreubotella.com/csswg-auto-build/css-contain-2/#laying-out-in-place

The containment box's content (including any pseudo-elements) must then be laid out into the now fixed-size containment box normally.

Does "fixed-size" mean that it's definite?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions