Images falling outside css columns on iOS

Question

I am using CSS columns to display images of assorted widths and heights so that they flow together without large white spaces. It works perfectly on desktop browsers, but on iPad and iPhone (using iOS Chrome), the last images in the list fall outside of the columns, appearing to the right of the columned container.

I've been troubleshooting the properties and can't make iOS obey.

Example page: https://gohbavote.ca/round-1/entry-26

Here's the HTML:

<div class="post-gallery">
  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

</div><!-- .post-gallery -->

CSS:

.post-gallery {
    display: block;
    float: left;
    line-height: 0;
    min-height: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 0px;
    -moz-column-count: 2;
    -moz-column-gap: 0px;
    column-count: 2;
    column-gap: 0px;
    width: 540px;
    border: 4px solid red; /* so you can see the boundaries of the container */
}
.lightbox-item {
    display: block; 
    float: left; 
    padding: 8px; 
    width: 100%;
    height: auto;
}
.lightbox-img {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

Can you see something I'm missing? Does iOS need some special setup to work properly with columns? Or is my CSS to blame? In case it's relevant, the site is built on top of Bootstrap 3.3.7.

Answer 1

The issue was that .lightbox-item was set to display:block and float:left. Once I set these to display:inline-block and float:none, iOS devices displayed the images correctly in the columns.