Skip to content

Flexbox stretch issue: aspect-ratio width ignored compared to explicit width #13937

Description

@conteui

Summary:
Flexbox stretch behavior appears to ignore width derived from aspect-ratio,
while explicit width/min-width/max-width values prevent stretching.
In effect, stretch seems to treat aspect-ratio sizing as if the width were auto,
rather than respecting the intrinsic width implied by the ratio.

This creates an inconsistency where aspect-ratio does not behave like
other intrinsic sizing constraints in the cross axis.

Reproduction:

<div class="wrapper">
  <button>Button</button>
</div>
.wrapper {
  display: flex;
  flex-direction: column;
}

button {
  height: 48px;
  aspect-ratio: 1;
}

Current behavior:
The button stretches to fill the entire width of the flex container.

Expected behavior:
Since aspect-ratio combined with a definite height produces a predictable width,
it may be expected to behave similarly to explicit width sizing and prevent stretch behavior.

Workaround:

align-items: flex-start;

or

width: fit-content;

Question:
Is this intentional Flexbox behavior,
a specification limitation,
or an implementation detail inherited from pre-aspect-ratio sizing rules?

Discovered during layout experiments for a ConteUI framework.

— ContéUI research notes

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