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

Bight

Your first sentence, first part (align-items: stretch) is true, but it's not the cause of the second part (preventing a Masonry layout). – Weidner

https://mcmap.net/q/37633/-is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them/3597276 – Weidner

So I used display: flex;align-items: flex-start; to the container to override the stretching and flex-shrink: 0; to the cards, but that just put them all on the same row that overflows the container. I tried adding flex-flow: column wrap; but now it's just one long column. – Bight

As discussed in the first link I provided, you need a height or max-height on the container for column wrap to work. – Weidner

possible duplicate: https://mcmap.net/q/456451/-create-a-masonry-grid-with-flexbox-or-other-css/3597276 – Weidner

So a dynamic height won't work? – Bight

For the column wrap method, only if the container is the height of the viewport. – Weidner

@Michael_B This method doesn't seem to work very well when the height of the child elements change. I need them to be able to grow and shrink which should be the forte of the CSS columns method. I made this example to show what I mean. Once it fills the space of the parent container, they no longer look like they were stacked neatly. – Bight

I agree. I think CSS Columns may be a good option for you in this case. – Weidner

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).

Hayse

Meaning, I can tell Chrome to always break up the content, but avoiding the breaking, not so much? – Bight