1476208 - Width declaration is ignored on element with flex-basis:0%

Status: RESOLVED DUPLICATE of bug 1331692

(Core :: Layout, defect)

Description

[All Bogs]

Attachment: example.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Steps to reproduce:

Open the attached "example.html" file.


Actual results:

The container with the orange border expands beyond the confines of its parent, even though a "width: 100%" declaration has been applied to it. As a result, the text in the blue container is not truncated.


Expected results:

The container with the orange border should not expand beyond the confines of its parent, and respect the "width: 100%" declaration. Although I'm not clever enough to determine whether Firefox' behavior is in violation of the spec, I feel that respecting the width declaration makes more sense. Chrome, Edge, and IE11 all do so.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report! This is tracked in bug 1331692.

Comment 2

[Daniel Holbert [:dholbert]]

(If you happen to be running into this in a real website, you may be able to work around it by setting a small "min-width" value on the flex item -- e.g. "min-width:0" should take care of it.)

Comment 3

[All Bogs]

Ah. Apologies for submitting a duplicate issue and thank you for the feedback!

Comment 4

[Daniel Holbert [:dholbert]]

No worries at all!  Thanks again.  This is on my radar as a flexbox bug that needs fixing in the near term, as we've gotten multiple reports of this causing trouble.