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

I'm using the multi-column layout in CSS to divide some text into two columns. It seams like CSS tries to keep the number of rows of text in the two columns the same, but I would instead like the entire first column to be used up before the text continues into the second one. I've tried setting the height if the container, but that doesn't make any difference.

Is there any way to achieve this with pure CSS? Maybe the solution isn't to use the multi-column layout?

#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/

Intended behaivour:

Solution

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