New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 464210 link

Starred by 15 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocked on:
issue 240765



Sign in to add a comment

Flex-basis is being ignored when sizing nested flex containers.

Reported by phi...@philipwalton.com, Mar 5 2015

Issue description

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
 
Labels: -OS-Mac OS-All Cr-Blink-Layout-Flexbox M-43
Status: Untriaged
Able to reproduce the issue on Windows and Linux as well.

This is a Non Regression issue seen from M21.
Cc: ashej...@chromium.org
 Issue 476840  has been merged into this issue.

Comment 3 by pennymac@google.com, Apr 14 2015

Labels: -M-43 M-44 MovedFrom-43
[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
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.
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).

Comment 6 by pennymac@google.com, May 21 2015

Labels: -M-44 MovedFrom-44
[AUTO] This issue has already been moved once and is lower than Priority 1,therefore removing mstone.

Comment 7 by tkent@chromium.org, Jul 10 2015

Labels: -Cr-Content Cr-Blink

Comment 8 by e...@chromium.org, Sep 26 2015

Owner: cbiesin...@chromium.org
Status: Assigned
Cc: msrchandra@chromium.org
 Issue 423112  has been merged into this issue.
Blockedon: chromium:240765
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

Comment 11 by tkent@chromium.org, Oct 16 2015

Labels: -Cr-Blink
Cc: e...@chromium.org cbiesin...@chromium.org szager@chromium.org tabatkins@chromium.org
 Issue 533627  has been merged into this issue.
Cc: -ashej...@chromium.org
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