New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 615372 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Bug



Sign in to add a comment

page-break-inside: avoid not respected on an element inside a flexbox

Reported by jdiet...@gmail.com, May 27 2016

Issue description

Chrome Version       : 50.0.2661.102 (Official Build) (64-bit)
OS Version: Debian 8.4

What steps will reproduce the problem?
1. Open the attached file e.html
2. Type Ctrl-P and look at the print preview

What is the expected result?
Since the child divs (with red or blue borders) have "page-break-inside: avoid" set on them, I expect that they will not be split across a page boundary.

What happens instead of that?
Instead, notice that one of the divs is split across a page boundary. See the attached file e_display_flex.png.


This seems to be a flexbox issue. Changing "display: flex" to "display: block" on the parent div causes the "page-break-inside: avoid" setting on the child divs to be respected as expected. See the attached file e_display_block.png.


 
e.html
1019 bytes View Download
e_display_flex.png
53.7 KB View Download
e_display_block.png
53.6 KB View Download
Components: Blink>Layout>Flexbox
Labels: Needs-Feedback
Unable to reproduce the issue on Ubuntu 14.04, Windows 7, Mac 10.11.5 using 50.0.2661.102, latest stable 51.0.2704.63, canary 53.0.2751.0 as per above steps.Observed that there is no split across a page boundary.

Please find attached screenshot.

jdietrch@Could you please check the issue on clean profile and update the thread if issue still persists.
615372.png
87.6 KB View Download

Comment 2 by jdiet...@gmail.com, May 31 2016

I'm sorry; I attached the wrong e.html.

I was experimenting with both
    body > div {
        display: flex;
        flex-direction: column;
    }
and
    body > div {
        display: block;
        flex-direction: column;
    }
and I see now that I attached the file e.html while it said "block" instead of "flex".

As noted in my original report, it does work as expected when the div is display:block but not when it's display:flex.

I've attached a corrected version of e.html, this time with display:flex for body>div.

Thank you,
James
e.html
1018 bytes View Download
Project Member

Comment 3 by sheriffbot@chromium.org, Jun 1 2016

Labels: -Needs-Feedback Needs-Review
Owner: ssamanoori@chromium.org
Thank you for providing more feedback. Adding requester "ssamanoori@chromium.org" for another review and adding "Needs-Review" label for tracking.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 4 by e...@chromium.org, Jun 1 2016

Cc: cbiesin...@chromium.org ssamanoori@chromium.org
Owner: ----
Status: Available (was: Unconfirmed)

Comment 5 by rood...@gmail.com, Mar 7 2017

here (http://codepen.io/aroudaki/pen/peNNKy) is another repro for this issue 
OS: windows 10
Chrome ver: 56.0.2924.87

FYI: it works fine on the latest versions of IE, Edge and Firefox
Cc: msten...@opera.com

Comment 7 by msten...@opera.com, Mar 7 2017

Could be because of bug 606350?

Comment 8 Deleted

Comment 9 by rood...@gmail.com, Mar 8 2017

just realized removing margin-top will fix the issue.
looks like its a combination of having margin and being flex box.

here is the same sample with margin removed:
http://codepen.io/aliry/pen/KWNxaB
Labels: -Needs-Review
Cleaning up sheriffbot label "Needs-Review" label as a part of modified "Needs-Feedback" sheriffbot rule. [ref bug for cleanup 684919]
Project Member

Comment 11 by sheriffbot@chromium.org, Apr 12 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 12 by e...@chromium.org, Apr 18 2018

Status: Available (was: Untriaged)

Sign in to add a comment