How to make flexbox items take up empty spaces?

Question

I am creating a website, and I want the contents of some page (which is text content) to be displayed as two columns. I am using flexbox as a container of the content where the width of each part of the content is 50%. The problem is shown in the image below:

I want the 3s div to take up the space left below the 2s div instead of remaining empty and ruining the look of the page.

Here is a simple code that demonstrate the case:

#container {
  display: flex;
  flex-wrap: wrap;
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  width: 50%;
  padding: 25px;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111
  </div>
  <div class="d" id="d2">
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22
  </div>
  <div class="d" id="d3">
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333
  </div>
  <div class="d" id="d4">
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44
  </div>
</div>

and here is a CodePen link if you prefer: link

Flexbox draw grids (row&columns) where element do not span through columns nor rows. grid would but spanning needs to be set . What you look for would be column-css — G-Cyrillus, Sep 09 '17 at 09:49

score 3 · Answer 1 · answered Sep 09 '17 at 09:39

You don't need to use 'flex-box' for that, float elements behaves just like you want.

Put float: left on the .d and it will fill that gap.

If you need that the div with the 4's will be on a separate row, you can achieve that via clear: both / left / right.

#container {
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  width: 50%;
  padding: 25px;
  float: left;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111
  </div>
  <div class="d" id="d2">
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22
  </div>
  <div class="d" id="d3">
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333
  </div>
  <div class="d" id="d4">
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44
  </div>
</div>

G-Cyrillus · Accepted Answer · 2017-09-09T10:02:01.593

What you look for would be CSS Multi-column Layout. (tut)

flex draws element columns by columns or rows by rows without spanning through.

here you would need to:

set direction to column
set the height of the container to trigger wrapping to next columns when first col is filled.

grid allow spanning but it must be set.

float can be also a way as Felix Mosheev proposed.

#container {
  column-count: 2;
  column-fill:balance
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  padding: 25px;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111
  </div>
  <div class="d" id="d2">
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22
  </div>
  <div class="d" id="d3">
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333
  </div>
  <div class="d" id="d4">
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44
  </div>
</div>

How to make flexbox items take up empty spaces?

2 Answers2