[csswg-drafts] [css-sizing] Rethinking how to prevent overflow in a container with an explicit aspect ratio

jensimmons has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] Rethinking how to prevent overflow in a container with an explicit aspect ratio ==
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 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3268 using your GitHub account

Received on Wednesday, 31 October 2018 20:02:21 UTC