CODEWITHSUNDEEP
cssmultiple-columns
Cailean
Cailean

Reputation: 101

fill remain height of child element with css columns

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>

how it looks now how I want it to be

Upvotes: 0

Views: 26

Answers (1)

Temani Afif
Temani Afif

Reputation: 273086

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>

Upvotes: 1

Related Questions