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

Question

我的问题:我想设置一个 min-height到文本容器 <div>与列。

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

但是，当我将 min-height 属性分配给多列文本容器时，min-height由于我不明白的原因，它被解释为某种最大列高。

请查看 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 的解释不同，它定义了列的高度，而不是内容不足的高度。

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