CSS columns break elements apart in Chrome even with break-inside:avoid;

Question

One issue with Flexbox is that the entire row's height changes to match the biggest element in it, thus not achieving a Masonry-type layout.

I am currently trying to use Semantic UI's card views together with CSS columns instead of their cards class to avoid this issue.

The problem with that is that Chrome seems to break apart the card element into various places in the columns while Firefox renders it just fine. It seems that the break-inside CSS property is intended to fix this, but it doesn't seem to work in Chrome.

body {
    padding: 10px;
    width: 100%
}

.container {
    padding: 15px;
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    width: 100%;
}

.container > .card {
    width: 90% !important;
    display: inline-block !important;
    margin-top: 0px !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid-column !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<div class="container">
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
</div>

A CodePen with the example code

As you can see in the below screenshots, the content of the cards flies back to the previous column while the image stays where it should.

Screenshot of Chrome full page render

Screenshot of Chrome windowed render

Screenshot of Firefox full page render

Answer 1

This is due to a lack of support. From caniuse.com:

WebKit- and Blink-based browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values)

Update

It means the -webkit-column-break-inside: avoid; is not supported in WebKit- and Blink-based browsers, like Chrome (as it is WebKit-based).