Since Firefox quantum my CSS don't work anymore
How can I force Firefox to print on the next page when inside elements with display: table
?
Outside, it works fine.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
@page {
margin: 0.1mm 12mm 5mm 12mm;
}
.page-break {
page-break-after: always;
}
.grid {
display: table;
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
}
.header {
display: table-header-group;
vertical-align: top;
height: 15mm;
min-height: 15mm;
}
.main {
display: table-row-group;
vertical-align: top;
}
.footer {
display: table-footer-group;
vertical-align: top;
}
.footer-space {
height: 10mm;
min-height: 10mm;
}
.footer-fix {
position: fixed;
bottom: 0;
}
<div class="grid">
<!-- GRID -->
<div class="header">
<!-- HEADER -->
HEADER
</div>
<!-- HEADER -->
<div class="footer">
<!-- FOOTER -->
<div class="footer-space"></div>
<div class="footer-fix">Footer</div>
</div>
<!-- FOOTER -->
<div class="main">
<!-- MAIN -->
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<p>1 test test test</p>
<p>2 test test test</p>
<p>3 test test test</p>
<p>4 test test test</p>
<p>5 test test test</p>
<p>6 test test test</p>
<p>7 test test test</p>
<p>8 test test test</p>
<p>9 test test test</p>
<p>10 test test test</p>
<div class="page-break"></div>
<div>NEXT PAGE</div>
</div>
<!-- MAIN -->
</div>
<!-- GRID -->