Is it possible to make all the children of a `flex-flow: column` flexbox the same height as the tallest child?

user_5554681 0
Viewed 51

If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?

I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.

In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
}

.panel:nth-child(even) {
  background: lightgrey;
}
<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

flexbox css html
3 Answers

The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.

user_35972760

If you don't mind them stretching to fit container height you can set children flex-basis to 20%:

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
  flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}
<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

user_53372130

You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}
<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

user_17123430
Related