Flex-basis is being ignored when sizing nested flex containers.
Reported by phi...@philipwalton.com, Mar 5 2015
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2322.0 Safari/537.36 Example URL: http://codepen.io/anon/pen/wBJQap Steps to reproduce the problem: 1. Open the demo: http://codepen.io/anon/pen/wBJQap 2. Notice that the inner flex container is being sized based on the text content and ignoring the flex-basis values. What is the expected behavior? The inner container should have a width of 200px (each flex item has a flex-basis of 100px) What went wrong? The inner container's width is being set to the same value as the width of the text, but it should be set to the value of the two item's flex-basis (in this case, 200px). Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? No Firefox 36.0, Safari 8.0.3 Chrome version: 43.0.2322.0 Channel: n/a OS Version: OS X 10.10.2 Flash Version: Shockwave Flash 17.0 r0
Mar 5 2015,
Able to reproduce the issue on Windows and Linux as well. This is a Non Regression issue seen from M21.
Apr 14 2015,
Issue 476840 has been merged into this issue.
Apr 14 2015,
[AUTO] Moving all non essential bugs to the next Milestone. (This decision is based on the labels attached to your ticket.) Ref: https://sites.google.com/a/chromium.org/dev/developers/ticket-milestone-punting-1
Apr 15 2015,
Just to reiterate something that I made clear on my ticket but is stated differently on this ticket: this is something that worked before and is breaking any website that relies on flex-basis for layout under certain conditions (like the one I described). The application I work on is currently completely broken on Chrome Canary because of this.
Apr 20 2015,
Is 476840 really a duplicate of this one? crbug.com/476840 is about a regression with absolutely positioned flex container (this works in stable Chrome and Firefox, but is broken in Chrome beta), and this issue's codepen entry doesn't even use position: absolute (broken in stable Chrome, Firefox and Chrome beta).
May 21 2015,
[AUTO] This issue has already been moved once and is lower than Priority 1,therefore removing mstone.
Jul 10 2015,
Sep 26 2015,
Oct 7 2015,
Issue 423112 has been merged into this issue.
Oct 7 2015,
Like I wrote in bug 423112 : Yeah this is kind of a sucky consequence of a bug we have, perhaps combined with an unfortunate spec consequence... When the outer flexbox finds the desired size of the inner flexbox, it asks for its max-content size (see LayoutFlexibleBox::computeInnerFlexBaseSizeForChild). But here's where the bug comes in, the max-content size does not take flex-basis into account, only width properties/actual content. That's why adding an explicit width fixes the bug. bug 240765 would fix this
Oct 16 2015,
Jul 7 2016,
Issue 533627 has been merged into this issue.
Nov 2 2017,
May 9 2018,
Is there any word on this bug? I've just run into it... have a flex parent that is ignoring the flex-basis of the child :( I've had to specify a width on the child instead of a flex-basis, as a temporary workaround.
Sign in to add a comment