Closed Bug 1375736 Opened 7 years ago Closed 7 years ago

[css-flexbox][css-break] div block set as "display:flex; flex-flow:column nowrap;" inhibits any page break when printing


(Core :: Layout, defect)

54 Branch
Windows 10
Not set





(Reporter: hernanibus, Unassigned)


(Keywords: testcase)


(1 file)

What did you do?
1. Set an html page with no CSS styles but browser defaults

2. Set the following CSS styles:

  .body_page_holder, .block1{display:block;}

3. Define a web page as follows:

<!DOCTYPE html>
<html lang="ja-JP" >
      .body_page_holder, .block1{display:block;}
    <div class = "containerBody">
        <div class="body_page_holder">

        <div class="blockTest">

          <div class="block1">
            <p> Very long text...</p>
          .......  same div class block1 11 times  .....
        </div> <!-- Closing blockTest -->

        <div class="block1">
          <p> Very long text...</p>
        <div class="block1">
          <p> Very long text...</p>
        </div>  <!-- body_page_holder close -->

4. Preview and print page
5. Change blockTest style as follow:

.blockTest{display:flex;flex-flow:column nowrap;}

6. Check that web page was displayed exactly the same
7. Preview and print page

What happened?
- With the first style definition for 'blockTest' class the web page was displayed as expected and printed as expected with each <div class="block1"></div> displayed in a different page as expected by the setting '.block1{page-break-after:always;}'.

- With the second definition for 'blockTest' class the web page as displayed as expected as well but when printing, both preview and print where not as expected:
  + In the first page all blocks where displayed one after another until the end of the page. Blocks not fitting in the page were missing and never displayed.
  + In the second page the first block outside of 'blockTest' block was printed. Subsequent blocks were also printed as expected: each one on a different page.

- The flex block seems to be behaving as follows:
  + All page breaks where avoided, both soft and hard.
  + When printing block behave as if it were set to 'overflow:hidden' cutting the content.

As far as I know this behave is not expected and there is no reason for a flex block to behave differently on screen than when printed (regarding the overflow) hence considering this behave a bug.

What should have happened?
Both class settings should have produce the same printed material and they did not.

Is there anything else we should know?
using Firefox 54.0 (32-bit)
on Windows 10 Home 64 bit version 1703
Component: Design → Untriaged
OS: Other → Windows 10
Product: Mozilla Developer Network → Firefox
Hardware: All → x86_64
Version: unspecified → 54 Branch
Component: Untriaged → Printing: Output
Product: Firefox → Core
I suspect this report is invalid since flex-flow:column makes the lines
orthogonal to the fragmentainer, but I haven't looked at what the spec(s)
say about this case.  Daniel might know.
Component: Printing: Output → Layout
Flags: needinfo?(dholbert)
Keywords: testcase
Summary: div block set as "display:flex" inhibits any page break when printing → [css-flexbox][css-break] div block set as "display:flex; flex-flow:column nowrap;" inhibits any page break when printing
Whiteboard: [specification][type:bug]
Yeah, this is supposed to work according to the flexbox spec, but it doesn't work yet in Firefox -- this is a version of bug 939897.
Closed: 7 years ago
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE

Printing single-line column flex containers is fixed by bug 1622935.

You need to log in before you can comment on or make changes to this bug.