[css-sizing] Rethinking how to prevent overflow in a container with an explicit aspect ratio #3268
Description
We are working on defining a way to explicitly assign an aspect ratio to elements. We also want an easy way for Authors to be able to specify that they want their container to grow to fit more content, if there is more content than will fit into the constrained box.
In the current rough draft at https://drafts.csswg.org/css-sizing-4/#ratios, there are two options proposed — an Option A, and Option B. (I'm not going to describe them here, you can go read them at that link.) (For more, read these slides: https://noti.st/jensimmons/FnU3KJ/adding-explicit-aspect-ratios-to-css)
After the CSSWG last week at TPAC Lyon 2018, it struck me that maybe we don't need either option. Maybe we already have the building blocks needed.
Would it work to simply do this?
.square-that-grows-to-hold-all-content {
width: 100%;
aspect-ratio: 1 / 1;
min-height: max-content;
}
Do we need something more than this? I'm thinking this might do it.
The width is set by the containing formatting context. The height is set by the aspect-ratio property to be (in this case) the same length as the width. And the min-height overrules the height, telling the browser to make the min-height be bigger if the max-content size of the content requires it (or perhaps, min-content).
It seems this will work if min-height beats height. To see if this happens, I made this test:
https://codepen.io/jensimmons/pen/ePbePr?editors=1100
That Pen not work in Firefox, since we haven't implemented max-content yet. But it does appear to work the way I'm hoping in Safari & Chrome on Mac desktop.
Thoughts? / cc @dbaron @fantasai @tabatkins