заполнить оставшуюся высоту дочернего элемента столбцами css

Question

У меня есть контейнер, который разделяет его содержимое на 2 столбца. Можно ли заполнить оставшуюся высоту в дочернем разделе, чтобы следующий раздел мог начинаться со следующего столбца? Или какой-то другой подход с таким же результатом.

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

Просто добавьте немного поля. Сделайте так же, как высота, чтобы она всегда работала

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