CSS列未显示Chrome 55中的所有内容

Question

最新稳定的Chrome 55不会显示包含“columns”css属性的元素中的所有内容。 Chrome 53和54可以正常工作。

下面你可以在Chrome 55上看到，下面是Chrome 54.两者都以不同的方式呈现相同的代码段。您可以在Elements开发工具中选择“隐藏”元素。这里是jsfiddle的直接链接： https://jsfiddle.net/tykvx3re/9/

即使简单文本在列中流动，它也不会显示： 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>

我做错了什么，或Chrome 55确实存在错误？ 如果有人可以提供解决方法，我会很感激。

Answer 1

对于那些感兴趣的人，这里是我发现的这个bug的变通方法。

我结束了使用Flexbox Layout模拟“columns”属性。您可以在此处查看示例：https://jsfiddle.net/tykvx3re/14/

它对我有用，因为我的容器都具有相同的宽度。对于那些想要模拟文本流的人，您需要将文本分成具有相同长度的单独块。你可以这样做：

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>"));
});

以下是它如何堆叠在一起： https://jsfiddle.net/tykvx3re/16/

Answer 2

Chromium问题跟踪器更新

此错误现已修复，但补丁只会合并到V57。

此补丁不会合并到最近发布到Stable频道的V56。

更新

进一步研究这个问题，它似乎是Chrome v55中引入的一个错误。

链接到问题：#674640: CSS3 Multi-column layout cropped whole columns with overflow-x: auto

如果这不是已知问题，则应将此报告为新功能实现。

似乎Chrome尚未完全支持CSS Multi-column Layout Module。 截至今天，Chrome仅为v3及以下版本的CSS3多列布局提供部分支持，因此这些功能似乎不稳定。

截至目前，只有IE11，Edge和Opera Mini提供全面支持。

来源：http://caniuse.com/#feat=multicolumn