Is it possible to do the effect shown below in a Webkit-based browser? In Firefox break-after: always; works and breaks the column but not in Chrome.
.break {
break-after: always;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif, Helvetica, Arial;
font-size: 75%;
}
#columns {
width: 100%;
display: flex;
flex-flow: column wrap;
align-content: center;
}
.testcl {
min-width: 150px;
min-height: 150px;
box-shadow: 0 0 4px 1px #4B5257;
margin: 7px 10px;
}
.testcl h2 {
margin: 0;
padding: 4px;
font-size: 90%
}
.testcl ul {
list-style: none;
margin: 0;
padding: 5px;
line-height: 1.8em
}<body>
<div id="columns">
<div class="testcl">
<h2>Test</h2>
<ul>
<li><a href="https://www.google.com/">Google</a></li>
</ul>
</div>
<div class="break"></div>
<div class="testcl">
<h2>Test</h2>
<ul>
<li><a href="https://www.google.com/">Google</a></li>
</ul>
</div>
<div class="break"></div>
<div class="testcl">
<h2>Test</h2>
<ul>
<li><a href="https://www.google.com/">Google</a></li>
</ul>
</div>
<div class="break"></div>
<div class="testcl">
<h2>Test</h2>
<ul>
<li><a href="https://www.google.com/">Google</a></li>
</ul>
</div>
</div>
</body>