Description
<!DOCTYPE html>
<button>Click me</button>
<div id="target" style="width: 100px; aspect-ratio: 1; border: solid">
<div style="height: 200px"></div>
</div>
<script>
var target = document.getElementById("target");
document.querySelector("button").addEventListener("click", () => {
target.style.minHeight = getComputedStyle(target).minHeight;
});
</script>There is interoperability among Gecko, Blink and WebKit: the resolved value of min-height doesn't round-trip. Awful.
This is because of CSS Sizing 3: https://drafts.csswg.org/css-sizing-3/#valdef-width-auto
For backwards-compatibility, the resolved value of this keyword is zero for boxes of all [CSS2] display types: block and inline boxes, inline blocks, and all the table layout boxes. It also resolves to zero when no box is generated.
This was fine because min-height: auto used to behave as zero. But CSS Sizing 4 went and changed that, without taking care of the resolved value: https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum
In order to avoid unintentional overflow, the automatic minimum size in the ratio-dependent axis of a box with a preferred aspect ratio that is neither a replaced element nor a scroll container is its min-content size capped by its maximum size.
Hopefully it's not too late to change.