New issue
Advanced search Search tips

Issue 915612 link

Starred by 1 user
Status: Duplicate
Merged: issue 660611
Owner: ----
Closed: Dec 18
Cc:
mstensho@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Bug



Sign in to add a comment

Flexbox divs containing images are cut in half if used with columns

Reported by vertical...@gmail.com, Dec 17 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Steps to reproduce the problem:
Create parent div with two columns layout. Add 3 children divs with "display:flex; justify-content: center; align-items: center;" and inside each div image with "display: block; width: 100%;"

I attached file for easier reproduction.

What is the expected behavior?
Picture 1 and 2 should be in 1st column and picture 3 should be in 2nd column.

What went wrong?
Picture 2 is cut in half, upper half is in column 1, bellow picture 1 and lower half is in column 2, above picture 3.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 71.0.3578.98  Channel: stable
OS Version: 10.0
Flash Version:
flex-in-columns.html
714 bytes View Download
flex-in-columns.png
1.4 MB View Download

Comment 1 by woxxom@gmail.com, Dec 17 

Observed since at least Chrome 17 when -webkit-flexbox CSS was shipped.

Comment 2 by phanindra.mandapaka@chromium.org, Dec 17

Labels: Needs-Triage-M71

Comment 3 by e...@chromium.org, Dec 17

Cc: mstensho@chromium.org
Components: -Blink>Layout Blink>Layout>MultiCol
Labels: -Pri-2 Pri-3
Status: Available (was: Unconfirmed)

Comment 4 by mstensho@chromium.org, Dec 18

Components: Blink>Layout>Flexbox
Mergedinto: 660611
Status: Duplicate (was: Available)
Flexbox block fragmentation support is very limited. We currently only support breaking *inside* flex items (and there's no good break opportunity inside items in the attached test case, so we end up with slicing images, which is bad when avoidable (it *is* avoidable)). We have no mechanism to propagate the implicit break *before* the flexbox, which would have made the test case render properly.
►

Sign in to add a comment