CSS columns not displaying all content in Chrome 55

Question

The latest stable Chrome 55 does not display all the content that flows in an element with the "columns" css property. However, Chrome 53 and 54 are working fine.

Below you can see the top Chrome 55, and below it Chrome 54. Both make the same fragment in different ways. You can see the “hidden” elements when I select them in the “Elements” tool. Here is a direct link to jsfiddle: https://jsfiddle.net/tykvx3re/9/

It does not appear even when plain text arrives 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 is there really a bug with Chrome 55? I would appreciate if anyone could advise a workaround.

Answer 1

Chromium bug tracking update

This bug has now been fixed, but the patch will only be merged with V57.

This patch will not be merged with V56, which was recently released on the Stable channel.

---

Update

Having carefully considered this problem, it seems to be a bug that appeared in Chrome v55.

Link to question: # 674640: CSS3 Multi-column layout cropped entire columns using overflow-x: automatically

---

If this is not a known issue, you should report it as a new feature.

CSS seems to have a multi-column layout module not yet fully supported in Chrome. Chrome currently only provides partial CSS3 support. Multiple column layouts from version 58 and below, so features like these are considered unstable.

Only IE11, Edge and Opera Mini provide full support at the moment.

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

Answer 2

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

I ended up modeling the "columns" property using the Flexbox layout. Here you can see an example: https://jsfiddle.net/tykvx3re/14/

This worked for me because my containers are the same width. For those who want to simulate the flow of text, you need to break the text into separate blocks with the same length. You can do it as follows:

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's how it stacks up: https://jsfiddle.net/tykvx3re/16/