https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic
The axis in which the preferred size calculation depends on this aspect ratio is called the ratio-dependent axis, and the resulting size is definite if its input sizes are also definite. The opposite axis (on which the ratio-dependent axis size depends) is the ratio-determining axis.
But of course both axes can depend on each other:
<!DOCTYPE html>
<div style="aspect-ratio: 1; height: 100px; width: min-content; min-width: 200px; min-height: min-content; border: solid"></div>
From my experience with replaced elements, this is supposed to behave like this:
- Compute a tentative block size, only taking into account extrinsic values. So 100px (we ignore
min-height: min-content)
- Then we can compute the intrinsic inline size, by transferring the tentative block size through the aspect ratio:
100px
- Then we can compute the used inline size:
100px floored by 200px, so 200px.
- Then we can compute the intrinsic block size, by transferring the used inline size though the aspect ratio:
200px
- Then we can compute the used block size:
100px floored by 200px, so 200px.
This matches Blink. Gecko and WebKit don't support min-height: min-content, so it's only 100px tall there.
But anyways, each axis depends on the other. The terms are fiction.
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic
But of course both axes can depend on each other:
From my experience with replaced elements, this is supposed to behave like this:
min-height: min-content)100px100pxfloored by200px, so200px.200px100pxfloored by200px, so200px.This matches Blink. Gecko and WebKit don't support
min-height: min-content, so it's only 100px tall there.But anyways, each axis depends on the other. The terms are fiction.