- From: fantasai via GitHub <sysbot+gh@w3.org>
- Date: Mon, 20 Jul 2020 19:25:04 +0000
- To: public-css-archive@w3.org
@cbiesinger > So, I want to follow up on the flex item case. First I thought you were right, now I'm not sure. See: > [drafts.csswg.org/css-flexbox/#definite-sizes](https://drafts.csswg.org/css-flexbox/#definite-sizes) step 3 > "_Once the cross size of a flex line has been determined_, the cross sizes of items in auto-sized flex containers are also considered definite" (emphasis mine) > > But [drafts.csswg.org/css-flexbox/#algo-main-item](https://drafts.csswg.org/css-flexbox/#algo-main-item) happens _before_ the cross-size determination. > > As such, I think the flex item case does require a `height: 100%` to trigger aspect-ratio in this case. Funnily enough, this comment was posted just a few days after we committed the (mistaken, it turns out) simplification to the definiteness rules you asked for in #3531, which made this exact case no longer have a definite size. While reviewing this thread we realized it wasn't redundant at all, exactly for cases like this, and restored that text in <https://github.com/w3c/csswg-drafts/commit/ba8c7af927ba2dddb5f0b1c49989cca6fbf20f1d>, so now the spec is back to the expected behavior of the flex item having a definite cross size immediately (because it's stretched, and the flex container is single-line and has a definite cross size), so the aspect-ratio should activate and give the item a width of 100px. > You convinced me for the align-self: stretch case, but I don't see why that's the case for non-stretched items? A non-stretched item won't gain a definite height like the above; it'll fall through to Flexbox algo step 3 case E, in which its width becomes max-content, which per css-sizing-3 depends on its available inline size, which is defined in Flexbox step 2 as the inner size of the flex container. At this point its *width* becomes definite, so the a-r should then give it a height. (Note that this doesn't require it to flex; this happens prior to that step.) Firefox appears to get this case right, currently; Chrome for some reason keeps it at the naturalHeight regardless ([testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20class%3Dflex%3E%0A%20%3Cimg%20class%3Ditem%20src%3D%22https%3A%2F%2Fxanthir.com%2Fpony%22%3E%0A%20%3Csvg%20viewBox%3D%22-1%20-1%202%202%22%20style%3D%22background%3A%20blue%3B%22%3E%3Ccircle%20r%3D%221%22%20fill%3D%22orange%22%2F%3E%3C%2Fsvg%3E%0A%3C%2Fdiv%3E%0A%3Cstyle%3E%0A.flex%20%7B%0A%20display%3A%20flex%3B%0A%20width%3A%20500px%3B%0A%20border%3A%20thick%20dotted%3B%0A%20flex-flow%3A%20row%20wrap%3B%0A%7D%0A.item%20%7B%0A%20flex%3A%20none%3B%0A%20align-self%3A%20start%3B%0A)). So, this appears to be well-defined and in line with what we'd expect. We think there's nothing left to do for this issue, if that seems right shall we close it? ~@tabatkins & @fantasai -- GitHub Notification of comment by fantasai Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5060#issuecomment-661286784 using your GitHub account
Received on Monday, 20 July 2020 19:25:06 UTC