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

我的问题是：我想将

min height

设置为带有列的文本容器

这个

最小高度

应该像往常一样影响整个

div

，因此不管里面的文本是什么，

div

始终至少是指定的高度

然而，当我为多列文本容器指定最小高度属性时，

min height

被解释为某种最大列高度，原因我不明白

请看一下JSFIDLE

为什么会发生这种情况

容器的样式为：

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

.
. 剪切到最小高度的长文本
.

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

Chrome对列的最小高度有不同的解释，它定义了列的高度，而不是内容不足的高度

---

也就是说，它可能是一个依赖浏览器的CSS代码或一个Chrome bug。

你认为这是一个bug吗？无论如何，chrome把最小高度和最大高度弄错了——或者诸如此类的东西！事实上，我发现它不是最大高度——它是高度。无论内容有多大，它都保持相同的高度。长内容将导致水平溢出（你可以通过设置overflow:auto来检查）。耶，我也检查过，向谷歌提交了一个bug，这绝对不正确。