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