如何让文本在使用下一列之前使用整个第一列？

Question

我在 CSS 中使用多栏布局将一些文本分成两栏。它看起来像 CSS 试图保持两列中文本的行数相同，但我希望在文本继续进入第二列之前用完整个第一列。我试过设置容器的高度，但这没有任何区别。

有什么方法可以用纯 CSS 实现吗？也许解决方案不是使用多列布局？

#container {
  column-count:2;
  height: 90vh;
  background:lightblue;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt congue turpis. Donec vehicula, nisi at imperdiet pulvinar, risus nibh suscipit sem, a varius ligula ligula ut nibh. Integer diam urna, ullamcorper at fringilla eget, pulvinar non sapien. Curabitur varius ac nisi vitae finibus. Donec congue lorem quis laoreet tempus. Etiam et erat ultrices, porttitor ipsum vitae, congue libero. Praesent laoreet id arcu vitae vehicula.

Proin varius posuere sem eget placerat. Ut et pulvinar nisi. Sed at leo blandit, feugiat enim semper, imperdiet dolor. Quisque mi felis, ultricies et libero non, finibus lacinia mauris. Pellentesque ultricies at purus in luctus. Cras faucibus sed lacus ut semper. Aliquam tempor augue diam, et molestie justo tempus eu. Maecenas vitae elit vitae tortor pretium volutpat.

Fusce convallis ipsum vitae magna bibendum fringilla. Ut bibendum hendrerit massa, vitae egestas sem aliquam sit amet. Sed eu pretium velit, blandit lobortis turpis. Sed at gravida tortor. Sed ut pulvinar nibh. Etiam magna turpis, porttitor sed lacus sit amet, egestas volutpat felis. In ac lectus et tellus posuere rhoncus nec volutpat leo. Nulla porttitor dui non velit pulvinar feugiat. Sed ultrices eleifend urna. In at lectus quam. Mauris fringilla pulvinar arcu, in dapibus purus. Sed semper a massa eu lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tristique nibh id neque sodales, et sodales magna condimentum. Cras pretium et libero eget consectetur.
</div>

JS-fiddle: https://jsfiddle.net/2xv10n3b/6/

预期行为：

Answer 1

添加column-fill: auto

#container {
  column-count:2;
  height: 90vh;
  background:lightblue;
  column-fill: auto;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt congue turpis. Donec vehicula, nisi at imperdiet pulvinar, risus nibh suscipit sem, a varius ligula ligula ut nibh. Integer diam urna, ullamcorper at fringilla eget, pulvinar non sapien. Curabitur varius ac nisi vitae finibus. Donec congue lorem quis laoreet tempus. Etiam et erat ultrices, porttitor ipsum vitae, congue libero. Praesent laoreet id arcu vitae vehicula.

</div>

如何让文本在使用下一列之前使用整个第一列？

How can I make text use the entire first column before using the next one?

html

css

css-multicolumn-layout