CSS columns not showing all content in Chrome 55

Question

Latest stable Chrome 55 will not show all content that flows in an element with "columns" css property. Chrome 53 and 54 work ok though.

Below you can see on top Chrome 55, and underneath is Chrome 54. Both render the same snippet differently. You can see the "hidden" elements as I select them in the Elements dev tool. Here is direct link to the jsfiddle: https://jsfiddle.net/tykvx3re/9/

It doesn't show even when simple text flows in the columns: https://jsfiddle.net/tykvx3re/12/

CSS:

.cssColumns {
  width:400px;
  height:200px;
  overflow: scroll;
  columns: 5;
  -webkit-columns: 5;
}

HTML:

<div class="cssColumns">
Some very long text.... 
</div>

Am I doing something wrong, or there really is a bug with Chrome 55? I'd appreciate if someone can advise with a workaround.

Answer 1

For those interested, here are the workarounds I found for this bug.

I ended simulating the "columns" property with Flexbox Layout. You can see an example here: https://jsfiddle.net/tykvx3re/14/

It worked for me, because my containers are all with the same width. For those that want to simulate text flow, you need to break the text into separate blocks with the same length. You can do it like this:

CSS:

.cssColumns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 400px;
  height: 200px;
  flex-flow: column wrap;
  overflow: scroll;
}

.cssColumns span {
  margin-right: 15px;
  display: block;
}

HTML:

<div class="cssColumns">
Some very long text.... 
</div>

Js:

$(function() {
  //Break the text into blocks, after the 20th char
  $(".cssColumns").html(("<span>" + $(".cssColumns").html().replace(/.{20}\S*\s+/g, "$&@").split(/\s+@/).join("</span><span>") + "</span>"));
});

Here is how it stacks together: https://jsfiddle.net/tykvx3re/16/

Answer 2

Chromium Issue Tracker Update

This bug is now fixed but the patch will only be merged to V57.

This patch will not be merged to V56 which was released recently to Stable channel.

---

Update

Looking further into this problem, it seems to be a bug introduced in Chrome v55.

Link to issue: #674640: CSS3 Multi-column layout cropped whole columns with overflow-x: auto

---

If this isn't already a known issue, you should report this as a new feature implementation.

It seems like CSS Multi-column Layout Module is not fully supported on Chrome yet. As of today, Chrome only provide partial support to CSS3 Multiple column layout from v58 and below so features like these deem to be unstable.

Only IE11, Edge and Opera Mini provides full support as of now.

Source: http://caniuse.com/#feat=multicolumn