How can I make my boxes more equal (whitespace & box-sizing problem with flexbox)

Question

This is my code:

  body {
  padding-top: 20px;
  text-align: center;
  background-color:black;
}

h1 {
  display: inline-block;
  background: white;
}

h1 {
  font-size: 30px
}

p {
  background: yellow;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.content {
  width: 20%;
  background-color: red;
  padding: 20px; margin:10px;
  }

<div class="container">
<div class="content">
  <h1>Box 1</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<div class="content">
  <h1>Box 2</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<div class="content">
  <h1>Box 3</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
</p>
</div>

<div class="content">
  <h1>Box 4</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</p>
</div>

<div class="content">
  <h1>Box 5</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

</div>

However, I have two problems with my code:

The box sizes are unequal in height: But why does the second row not have the same height as the first row? I thought that the flex-wrap would also mean that the boxes in all other wrapped rows are of equal height (i.e. the height of the biggest box in the Flexbox parent which is Box 3) What can I change in order to make all boxes the same size as the biggest box - regardless of wrapping?

The text boxes are unequal in height: In order to create a more pleasing aesthetic, I would like to have the yellow background of the text match in every box, i.e. I want to have lots of yellow free space beneath Box 1 and 2 so that the yellow boxes are automatically as high as Box 3. How can I accomplish that?

Take a look at this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Zekfad, Sep 25 '19 at 19:31
Is **[this](https://stackoverflow.com/a/58105800/4512005)** (close to) what you are looking for? — Razvan Zamfir, Sep 25 '19 at 20:13

Razvan Zamfir · Answer 1 · 2019-09-25T20:12:33.447

The red boxes should always be on one row since there are 5 of them and they have a 20% width (5 x 20% = 100%). The reason his does not happen in your case is that you are spacing them with margin. I wrapped every one of them in a <div class="box"> and added passing to that div:

.box {
  box-sizing: border-box; // subtract padding from width instead of adding it
  width: 20%;
  padding: 10px;
  display: flex;
  flex-direction: column;
 }

Solve the rest with flexbox:

h1 {
  display: inline-block;
  background: white;
  font-size: 30px
}

.text-center {text-align: center;}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  box-sizing: border-box;
  width: 20%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.content {
  background-color: red;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.box p {
  background: yellow;
  margin: 0;
  display: flex;
  flex: 1;
}

@media (max-width: 640px) {
  .box {
    width: 100%;
  }
}

<div class="container">
  <div class="box">
    <div class="content">
      <div class="text-center">
        <h1>Box 1</h1>
      </div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
  </div>

  <div class="box">
    <div class="content">
      <div class="text-center">
        <h1>Box 2</h1>
      </div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
  </div>

  <div class="box">
    <div class="content">
      <div class="text-center">
        <h1>Box 3</h1>
      </div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>

  <div class="box">
    <div class="content">
      <div class="text-center">
        <h1>Box 4</h1>
      </div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
  </div>

  <div class="box">
    <div class="content">
      <div class="text-center">
        <h1>Box 5</h1>
      </div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
</div>

Evik Ghazarian · Accepted Answer · 2019-09-25T19:58:29.523

In your condition flex is setting the height row by row.

You can use jquery to fix your problem.

If you don't want to use jquery simply ignore this answer.

Here is jquery solution and also CSS edited for yellow box:

$( document ).ready(function() {
 var array = new Array();
    $(".container").children(".content").each(function(){
    array.push($(this).height());
    });
    var maxHeight = Math.max.apply(Math,array);
    $(".content").height(maxHeight + "px");
});

  body {
  padding-top: 20px;
  text-align: center;
  background-color:black;
}

h1 {
  display: inline-block;
  background: white;
}

h1 {
  font-size: 30px
}

p {
  background: yellow;
  height: 80%; // this is making all the yellow containers to be same height
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.content {
  width: 20%;
  background-color: red;
  padding: 20px; margin:10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="content">
  <h1>Box 1</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<div class="content">
  <h1>Box 2</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<div class="content">
  <h1>Box 3</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
</p>
</div>

<div class="content">
  <h1>Box 4</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</p>
</div>

<div class="content">
  <h1>Box 5</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

</div>

How can I make my boxes more equal (whitespace & box-sizing problem with flexbox)

2 Answers2