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>

Answer 1

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.