Is there a solution for CSS column breaks that works in both Firefox and Chrome

Question

I have three columns. I'm using the approach of a "keep-together" div inside each column to keep my content from breaking where I don't want it to, and forcing a break where I want to.

The first column has slightly more content than the other two. If the keep-together div is set to display: inline-block it works fine in Firefox, but in Chrome the break between the first two columns doesn't happen and there are therefore just two columns. If the div is set to display: block, it works fine in Chrome, but in Firefox the two bottom lines from the bottom of the first paragraph column appear at the top of the second column.

I've created this Codepen which demonstrates the problem.

Here's my CSS:

.three_col {
    overflow-y: visible;
    column-count: 3;
    column-gap: 40px;
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -webkit-column-count: 3;
    -webkit-column-gap: 40px;
}
.keep_together {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    break-after: always;
    page-break-after: always;
    clear: both;
    width: 100%;
}

Here's my HTML:

<div class="three_col">
  <div class="keep_together">
  ... content ...
  </div>
  <div class="keep_together">
  ... content ...
  </div>
  <div class="keep_together">
  ... content ...
  </div>
</div>

acesmndr · Accepted Answer · 2020-02-03T09:22:38.187

You could use flexbox to keep the children of .three_col in a single row like this:

.three_col {
  display: flex;
}
.keep_together {
  margin: 20px;
  flex: 1;
}

<div class="three_col">
<div class="keep_together">
<h2 style="color: #02b4f0;">Location 1</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
<div class="keep_together">
<h2 style="color: #62bb47;">Location 2</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p>
</div>
<div class="keep_together">
<h2 style="color: #ef3781;">Location 3</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</div></div>

You could also use grid.

Are you sure the column-count is a flex properties? It works even into a container without display:flex — Sfili_81, Feb 03 '20 at 07:50
Thanks @Sfili_81 for correcting me. It seems as if the column-count is a property of its own. I'm used to writing grids and since there wasn't a column-count property in grid I immediately thought it was a flex property and when I tested it to work I didn't think it through. I guess the OP should look more into Grids since he is defining columns. — acesmndr, Feb 03 '20 at 09:25
Do check on IE 11 in case you need support for that as Flex is not fully supported on IE 11 — Learning, Feb 03 '20 at 09:28
I just had to make a few small modifications to make the flexbox behave like columns with a `column-gap`: I set a negative margin on the outer container div and a positive margin on the inside divs. I also set the container div's `justify-content:space-between`. I also made it responsive by setting `flex-wrap: wrap` on the outer container and a minimum width for the inside divs. [Here's my codepen](https://codepen.io/clayrav/pen/jOPNONY) — clayRay, Feb 04 '20 at 03:16

Is there a solution for CSS column breaks that works in both Firefox and Chrome

1 Answers1