Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-flexbox] Non-interop with shrinking images #1322
changed the title from
[css-flexbox] Non-interop with shrinking images
[css-flexbox] Non-interop with shrinking and growing images
May 6, 2017
Adjusting description back to focus on the testcase that was initially posted; there's definitely a bunch of bugs in image sizing, but wanted to discuss specifically this testcase which shows some very interesting non-conforming behavior in Firefox.
Basically what's happening is that the flex items shrink down in different stages. First of course all the excess space gets eaten up, and then the items shrink down to their min-content sizes (triggering wrapping at the spaces in item C). Then, however, instead of flooring the items at that point, Firefox starts to shrink the image. It seems to have a two-stage concept of the min-content floor.
I don't know how it's doing this, but it seems rather nice, so might be worth discussing if we want to adopt it somehow.
The Working Group just discussed
The full IRC log of that discussion<iank_> Topic: Non-interop of sizing images in flexbox
<astearns> github: https://github.com//issues/1322
<iank_> fantasai: <goes to project>
<iank_> fantasai: Testcase in last comment
<iank_> fantasai: Flex container, and has some content that shrink down to their min-content size, if you have too many items they'll start to overflow.
<iank_> fantasai: Excess space starts to take up, the text starts to break, <explains the testcase>
<iank_> fantasai: The item with the image starts shrinking.
<iank_> fantasai: This FF behaviour is kinda nice.
<iank_> fantasai: So we want to make FF follow the spec? Or make other vendors follow FF implmentation>
<iank_> dholbert: I wrote most of the flex code in FF, and don't know whats going on here.
<iank_> gregwhitworth: What is the usecase where folks would want this behaviour?
<iank_> fantasai: This means that it won't overflow, where other implmentations would.
<iank_> dholbert: <explains image gallery usecase> being able to shrink them is kinda nice.
<jensimmons> I just dropped this example in this codepen: https://codepen.io/jensimmons/pen/aVmogq
<iank_> fantasai: The image doesn't shrink until everything else has wrapped.
<iank_> cbiesinger: If you give the image a flex-basis: auto , and others a flex-basis of 0, don't you get that behaviour?
<iank_> fantasai: You wouldn't be able to get them to start out at their content sizes?
<iank_> fantasai: I don't think we need to resolve now, but interesting to think about.
<iank_> dholbert: I'll try and figure out whats happening in our impl, and report back on the github issue.
<iank_> jensimmons: I had a few questions about flexbox, lets of interop issues around squishing images, and because of those issues, they are really hard for authors to think about.
<iank_> astearns: Def. want interop here, just need to agree what that behaviour is.
<iank_> Rossen: It looks like we have all the impls apart from FF, having interop.
<iank_> Rossen: Switching to FF, means that we might run into compat.
<iank_> fantasai: We were going through interop cases, and most of them were obv., but this one seemed interesting.
<iank_> jensimmons: It also seems like we could do what we want, as there seems to be such lack of interop around images.
<iank_> gregwhitworth: Only about this issue?
<iank_> jensimmons: No, more broadly about images as flex items.
<iank_> gregwhitworth: Where are the bugs?
<iank_> fantasai: Don't have them here. But this one just seemed interesting.
(I didn't notice the
So, there's really just one main Firefox quirk here: we're treating the
Here's a version of the codepen with explicit "min-width:0" to make other browsers match that behavior:
With that tweak, Firefox and Edge agree on the rendering, I think. (Chrome doesn't quite agree -- it doesn't honor the aspect ratio at all as the image shrinks, whereas Firefox/Edge honor the aspect ratio up until the point where the "C C C" is the tallest thing and forces the image to that height via