Why does Chrome sometimes use only 2 out of 3 columns in my layout?

Question

I'm trying to create a Pinterest look of 3 columns for my WordPress posts. I'm using column-width and column-gap according to this example: https://codepen.io/dudleystorey/pen/yqrhw

body {
  min-height: 1000px;
}
#columns {
 column-width: 320px;
 column-gap: 15px;
  -webkit-perspective:1;
  width: 90%;
 max-width: 1100px;
 margin: 50px auto;
}

div#columns figure {
 background: #fefefe;
 border: 2px solid #fcfcfc;
 box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 margin: 0 2px 15px;
 padding: 15px;
 padding-bottom: 10px;
 transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
 width: 100%; height: auto;
 border-bottom: 1px solid #ccc;
 padding-bottom: 15px;
 margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
 color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
 opacity: 0.4;
}

@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}

<div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
 <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
 </figure>
 
 <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
 <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
 </figure>
 
  <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
 <figcaption>Belle, based on 1770’s French court fashion</figcaption>
 </figure>
  
 <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
 <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
 </figure>

  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
</div>

Both in IE10 and up and in Firefox works it fine. The problem is in Chrome, when there aren't enough posts (three or four): Chrome fill only the first 2 columns and breaking the design. like this: https://codepen.io/rachelbt/pen/BQwBGx

I read the profound post "Deal-breaker problems with CSS3 multi-columns " of Zoe Mickley Gillenwater.

I've found this question: Unbalanced CSS columns in Chrome that was written a year ago. Adding height to the container is not an option in my case because the posts count is dynamic.

According to caniuse Chrome supports the Multi-column layout module.

Is there any solution to this dynamic-height column issue in Chrome?