Skip to content

[css-flexbox] [css-sizing-4] Interaction of flexbox minimum height and aspect-ratio minimum height #6069

Open
@cbiesinger

Description

@cbiesinger

https://drafts.csswg.org/css-flexbox/#min-size-auto
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum

If an item has an aspect ratio and is a flex item, both specs impose a minimum size on a flex item. Consider:

<div style="display: flex; flex-direction: column; width: 100px;">
  <div style="aspect-ratio: 1/1">
    <div style="height: 500px;"></div>
  </div>
</div>

In this case, the flex item has two constraints:

  • Flexbox's automatic minimum size gives it a minimum height of 100px (the transferred size), because it uses the minimum of the content-based size and transferred size.
  • aspect-ratio's minimum size gives it a min-height of 500px

What should the used minimum size be? max(100px, 500px)? Or should the flexbox one "override" the aspect-ratio one?

https://github.com/web-platform-tests/wpt/blob/master/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html relies on the latter interpretation.

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