最小高度 css 属性 以意想不到的方式影响文本中的多列布局

Question

我的问题：我想将 min-height 设置为带有列的文本容器 <div>。

这个 min-height 应该影响整个 div，像往常一样，所以不管里面的文本如何，div 总是至少是指定的高度。

但是，当我将最小高度 属性 分配给多列文本容器时，min-height 被解释为 最大列高 [=41] =] 因为我不明白的原因。

请查看 JSFIDDLE。

为什么会这样？

https://jsfiddle.net/pnjurqot/1/

容器的样式是：

.withcolumns {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    position:relative;
    display:block;
}

.minheight {
    background-color:red;
    min-height:100px;
    color:white;
}

所以如果我这样做：

<div class="withcolumns">
.
. long text
.
</div>

它按预期工作，但如果我设置最小高度，它会失败：

<div class="withcolumns minheight">
.
. long text that gets clipped to min-height
.
</div>

Answer 1

似乎只发生在Chrome。它在 Firefox 和 IE 上运行良好。

Chrome对columns上的min-height的解释不同，定义的是column的高度，而不是内容不足的高度。

也就是说，它可能是依赖于浏览器的 CSS 代码或 Chrome 错误。