Page break inside avoid in flex not working as expected
Page-break-inside
applies to block-level
elements in the normal flow of the root element.
User agents may also apply it to other elements like table-row
elements.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside
page-break-after does not work in Chrome
It is a hack, but Chrome doesn't support page-breaks very well. So try to use this instead:
<body>
<main role="main">
<section class="tabs">
<div class="tabbed-content">
<div class="break-after">Page 1</div>
<div class="break-before">Page 2</div>
</div>
</section>
</main>
</body>
And add this to your css:
html, body, .main, .tabs, .tabbed-content { float: none; }
.break-after {
display: block;
page-break-after: always;
position: relative;
}
.break-before {
display: block;
page-break-before: always;
position: relative;
}
How to specify line breaks in a multi-line flexbox layout?
The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%
), they will force a line break.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(4n - 1) {
background: silver;
}
.line-break {
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="line-break"></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="line-break"></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="line-break"></div>
<div class="item">10</div>
</div>
CSS Page-Break Not Working in all Browsers
Parent elements can not have float
on them.
Setting float:none
on all parent elements makes page-break-before:always
work correctly.
Other things that can break page-break
are:
- using
page-break
inside tables - floating elements
inline-block
elements- block elements with borders
Related Topics
Gooey CSS Effects with Contrast Parent
Left/Right Float Button Inside Div
Half Pixel in Border Width Size It Is Not Showing
How Is The Caret on Twitter Bootstrap Constructed
Remove or Add Class in Angular
Regression Testing for Styling and Layout of Web Applications
How to Do Horizontal Scroll in Ionic 3
CSS: Placing an Arrow/Triangle with Border on The Top of My Drop Down Menu
Less CSS Set Dynamic Background Image with Mixin
How to Set Textarea Width with CSS
How to Access Two Ids in One CSS Selector