How to get flexbox columns to be the same height? - html

Question

I am trying to wrap my head around flexbox and I have hit a wall with something very simple that I can't seem to get right.
I have 6 columns that I want all the same height with 3 on each row. I have set the flex items to have a width of 33% but I have not set a height on anything. I thought once the flex items had content it would take the one with the greatest height and match everything to it.
Here is my markup:
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
}
.icon-box-1 {
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>

Answer 1

The equal height columns feature comes from align-items: stretch, which is an initial setting on a flex container. It makes flex items consume all available space in the cross axis.
If you check the actual size of each flex item, you will see that they are, in fact, equal height on each row (demo).
The problem is that the content of each item (.icon-box-1) is not stretching full height. It's just height: auto (content height), by default.
In order for the content to stretch full height, add display: flex to each flex item, so align-items: stretch goes into effect, like on the parent (demo).
Then use flex: 1 to make the content fill the remaining space on the main axis (demo).
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
border: 1px dashed red; /* for illustration */
display: flex; /* new */
}
.icon-box-1 {
flex: 1; /* NEW */
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>

Answer 2

Try adding "display: flex" to .flexbox and "flex: 0 1 auto" to the icon box so it fills the heights out. Here ya go:
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.icon-box-1 {
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
flex: 1 0 auto;
}
<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>