是否有可能将CSS列扩展到其父项底部

Question

我很确定我知道这个答案，但我无法以任何方式找到任何信息。

我有一个元素min-height和columns。浏览器往往强迫列甚至在元素的底部留下大量的空白空间。是否有可能让列扩展到元素的底部？

这里是什么，我现在有一个草图：

，这里是粗略我想什么：

这可能吗？

编辑

这里有一个Fiddle出我使用的标记。

Answer 1

可以创建在使用:after伪元件的最后一列的底部的空间（该空间将被计算为列的一部分和所述特技完成;）_

在小提琴你会发现你的文字包装<p>标签与p:after;

fiddle

Answer 2

可以使用display:table属性来轻松实现这一

见这里：https://jsfiddle.net/zr9q4mcd/

HTML：

<div class="display-table"> 
    <div class="display-tCell"> 
     texttexttext<br />texttexttexttexttext<br>texttexttext<br />texttexttexttexttext<br>texttexttext<br />texttexttexttexttext<br>texttexttext<br />texttexttexttexttext<br>texttexttext<br />texttexttexttexttext<br>texttexttext<br />texttexttexttexttext<br> 
    </div> 
    <div class="display-tCell col2"> 
     texttexttext<br />texttexttexttexttext 
    </div> 
</div> 

CSS;

.display-table { 
    display: table; 
} 
.display-tCell{ 
    display: table-cell; 
    vertical-align: top; 
    background-color: gray; 
} 
.col2{ 
    background-color: red; 
}