fill remain height of child element with css columns - css

Question

I have container which separate its content by 2 columns. Is it possible to fill remain height in child section so next section could start with next column? Or some another approach with same result.
jsfiddle
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>

Answer 1

Simply add some margin. Make it the same as the height to make sure it will always work
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
.section:not(:last-child) {
margin-bottom:150px;
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>