chrome and safari render css columns differently when number of items equals number of columns

Question

I've got a directory listing that uses CSS columns but behaves differently in Chrome and Safari. Each section of the directory has a wrapper that arranges the listings into two columns.

I've got the CSS so Chrome renders it the way I want:

In Safari, the first item in the second column sometimes has an apparent margin above it.

I can fix this in Safari by adding display: inline-block; to the list elements. This breaks the layout in Chrome, as sections which have only two items list both items in the first column.

Snippet:

ul {
	moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
  column-gap: 2em;
}

li {
   -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
	list-style-type:none;
	padding:10px;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

<h3>
A
</h3>
<ul>
  <li>Anna<p>Sometimes there is additional content</p></li>
    <li>Anya</li>
</ul>
<h3>
B
</h3>
<ul>
    <li>Bartolo <p>Sometimes there is additional content. The boxes are of variable size.</p></li>
    <li>Beatriz</li>
    <li>Benedicto</li>
  <li>Boggins</li>
</ul>

Is it possible to style this two-column directory in such away that it displays correctly in all browsers?

Calipee

Answer 1

I sorted this out, at least for Safari vs. Chrome.

Since this only applies when the number of items is equal to the number of columns, and since that number is known, I can apply display: inline-block; to li and then override that when the 2nd listing is also the last listing.

In my case, the solution is to add to the CSS:

li {
  display: inline-block; 
}

li:last-child:nth-child(2) {
  display: block;
}

Full CSS:

ul {
  moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  column-gap: 2em;
}

li {
  display: inline-block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
  list-style-type:none;
  padding: 1em;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

li:last-child:nth-child(2) {
  display: block;
}

Calipee

I am finding also that this solution is dependent on the elements having similar heights. I will likely avoid css columns in the future. – Calipee