Есть ли решение для CSS разрывов столбцов, которое работает как в Firefox, так и в Chrome

Question

У меня есть три столбца. Я использую подход «держать вместе» внутри каждого столбца, чтобы предотвратить разрыв содержимого в том месте, где я этого не хочу, и принудительный разрыв в том месте, где я хочу.

Первый столбец имеет немного больше контента, чем два других. Если для div для keep-Together установлено значение display: inline-block, то оно отлично работает в Firefox, но в Chrome разрыв между первыми двумя столбцами не происходит, и поэтому в нем только два столбца. Если для div установлено значение display: block, он отлично работает в Chrome, но в Firefox две нижние строки снизу первого столбца абзаца появляются в верхней части второго столбца.

Я создал этот Codepen , который демонстрирует проблему.

Вот мой 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%;
}

Вот мой 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

Вы можете использовать flexbox, чтобы хранить детей .three_col в одном ряду, например:

.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>

Вы также можете использовать grid .