1391821 - flex-basis broken when using children with fixed-width

Status: RESOLVED DUPLICATE of bug 1316534

(Core :: Layout, defect)

Description

[zac]

Attachment: notok.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.0
Build ID: 20170814072924

Steps to reproduce:

I used flex-basis together with width to create two flexbox columns of each 50%. I noticed that the grid returned unexpected results when opened in firefox. I was able to create a jsfiddle highlighting this issue:

https://jsfiddle.net/nnkw328r/ - uses flex-basis and makes unexpected line break
https://jsfiddle.net/bss7athc/1/ - does not use flex-basis and is thus not broken

This can also be fixed by moving to a percentage based width calculation for each a element, instead of the fixed 100px.


Actual results:

The two columns, each of size 50%, were shown below each other when using fixed display-inline elements with fixed width inside of a white-space: nowrap element.


Expected results:

The two columns should be besides each other, as shown when removing flex-basis. The fiddle which is broken in FireFox works well in Chrome and Edge.

Comment 1

[Alice0775 White]

Adding min-width:0; to .col selector seems to fix.

It seems related to bug 984711 and Bug 1015474.

Comment 2

[zac]

Ah yes min-width works indeed, thank you!

Comment 3

[Daniel Holbert [:dholbert]]

Yup!

Technically that shouldn't be necessary -- your "width:50%" style *should* constrain the default min-width calculation to be no larger than 50% of the parent.  But that's not how it works in Firefox right now, because we match some slightly older spec text. Bug 1316534 is filed on fixing that.

I believe this is basically a duplicate of that bug -- marking as such.  Thanks for the report!