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:
or
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
Summary:
Flexbox
stretchbehavior appears to ignore width derived fromaspect-ratio,while explicit
width/min-width/max-widthvaluespreventstretching.In effect,
stretchseems to treat aspect-ratio sizing as if the width wereauto,rather than respecting the intrinsic width implied by the ratio.
This creates an inconsistency where
aspect-ratiodoes notbehavelikeother intrinsic sizing constraints in the cross axis.
Reproduction:
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:
or
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