Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>flexbox | break-after, singleline, item</title>
<meta name="flags" content="interact paged">
<style>
* {widows: 1; orphans: 1;}
div {
background: red;
border: 1px solid white;
width: 20em;
display: flex;
}
p {
background: white;
margin: 0;
height: 2em;
flex: 1;
}
@media projection, print {
p {
break-after: always;
}
}
</style>
<h4>There should not be any red on the first page either onload, in
print preview, or fullscreen. Enter fullscreen or print preview.
You should not see the word fail after that.</h4>
<div>
<p></p>
</div>
<h1>fail</h1>