1282363 - position:absolute element wider than its (multi-)column not clipped at middle of column-gap

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Chris Rebert]

Attachment: Screenshot of different rendering in Firefox 49.0a2

Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/20161

Steps to reproduce:
1. Open the attached testcase in Firefox.
2. Resize the window to ~600px-700px wide.
2. Observe the red boxes.

Firefox's behavior:
The red boxes go under the 2nd and 3rd green boxes in their rows, but you can see them in the gaps between the columns.
(See Firefox screenshot)

Chrome/Safari/Edge's behavior:
The red boxes get clipped off at an imaginary vertical line which runs along
the horizontal center of the gap between the 1st and 2nd columns.
(See Chrome screenshot)

Details:
The testcase has a CSS multicolumn container that contains 3 columns.
Inside the container are several "cards" which are position:relative.
Inside the first 2 cards are position:absolute <div>s which are much wider than the width of a single column.
I'm not sure what behavior https://drafts.csswg.org/css-multicol/ dictates in this case or what behavior would be most desirable.
As Firefox is apparently in the minority in its handling of this case, I'm treating this as a Firefox bug for now.

Comment 1

[Chris Rebert]

Attachment: Screenshot of Chrome's rendering (same as Safari & Edge)

Comment 2

[Chris Rebert]

Attachment: Testcase demonstrating the bug

Comment 3

[Mats Palmgren (inactive)]

https://github.com/w3c/csswg-drafts/issues/314#issuecomment-310138645
"RESOLVED: Columns do not clip by default"