Guy Lowe
Guy Lowe

Reputation: 2370

How to make div rows fill available height

I have a simple web page that contains multiple rows. I want to be able to have those rows fill the available space equally (with a minimum height as well). The number of rows is also dynamic.

Here is the code:

.outer {
  display: block;
  overflow: auto;
  height: 100%;
}

.row {
  border: 1px solid blue;
  background-color: red;
  min-height: 120px;
}
<div class="outer">
  <div class="row">
    test 1
  </div>
  <div class="row">
    test 2
  </div>
  <div class="row">
    test 3
  </div>
  <div class="row">
    test 4
  </div>
  <div class="row">
    test 5
  </div>
</div>

The colouring is just there so we can see what is happening.

Any help would be appreciated. The other questions on SO are not helping my specific case. Or at least I can't find one that does :)

Upvotes: 1

Views: 77

Answers (1)

Henrik Albrechtsson
Henrik Albrechtsson

Reputation: 1742

.outer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.row {
    flex: 1;
}

Upvotes: 3

Related Questions