title: chrome and safari render css columns differently when number of items equals number of columns
body: <p>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.</p>
  
  <p>I've got the CSS so Chrome renders it the way I want:</p>
  
  <p><a href="https://i.stack.imgur.com/ZbG6v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZbG6v.png" alt="chrome renders columns correctly"></a></p>
  
  <p>In Safari, the first item in the second column sometimes has an apparent margin above it. </p>
  
  <p><a href="https://i.stack.imgur.com/9LkM7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9LkM7.png" alt="safari renders the second column with an apparant margin"></a></p>
  
  <p>I can fix this in Safari by adding <code>display: inline-block;</code> to the list elements. This breaks the layout in Chrome, as sections which have only two items list both items in the first column.</p>
  
  <p><a href="https://i.stack.imgur.com/RBeC4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RBeC4.png" alt="with the inline-block fix, chrome does not display columns with only 2 items correctly"></a></p>
  
  <p>Snippet: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;
  A
  &lt;/h3&gt;
  &lt;ul&gt;
    &lt;li&gt;Anna&lt;p&gt;Sometimes there is additional content&lt;/p&gt;&lt;/li&gt;
      &lt;li&gt;Anya&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3&gt;
  B
  &lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;Bartolo &lt;p&gt;Sometimes there is additional content. The boxes are of variable size.&lt;/p&gt;&lt;/li&gt;
      &lt;li&gt;Beatriz&lt;/li&gt;
      &lt;li&gt;Benedicto&lt;/li&gt;
    &lt;li&gt;Boggins&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible to style this two-column directory in such away that it displays correctly in all browsers?</p>