1513435 - Incompatible column layout with 'height:0' and definite 'column-width'

Status: UNCONFIRMED

(Core :: Layout: Columns, defect, P3)

Description

[bgstandaert]

Attachment: gridlistitems.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

1. Visit jsfiddle.net/Ls5mkjec/embedded/result/.
2. If necessary, reduce the size of the browser window so that the list items cannot all fit on one line.


Actual results:

The list items remain in one line, and overflow off the side of the page.


Expected results:

The items should split into multiple columns, as they do in Chrome and Safari.

This causes the player list on Quizlet Live (https://quizlet.com/features/live) to display incorrectly.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase #1

Seems like a bug in Chrome to me, but I haven't read the spec (css-multicol).

Comment 2

[Jonathan Watt [:jwatt]]

Or maybe Chrome deliberately ignores any block-direction sizing restriction in order to avoid creating an arbitrary large number of columns in the inline direction? It sort of seems desirable in the case of columns to avoid that behavior the potential to create very undesirable scrolling.

Adding the webcompat flag since this has been encountered on the Web, and I guess P3 is about right unless this crops up more often.

Comment 3

[bgstandaert]

Quizlet has updated their website to avoid this issue, would you like me to leave this issue open?

Comment 4

[Jonathan Watt [:jwatt]]

Thanks for updating us. Yes, let's leave this open, thank you. It's still an incompatibility between Firefox and Chrome that could annoy devs or break other sites, and it should be resolved one way or another.

Comment 5

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.