how to show equal height of column using flex box - css

Question

could you please tell me how to show equal height of column using flex-box.I tried like this
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: #eee;
padding: 20px;
}
.grid-item {
width: calc(50vw - 0px);
}
here is my code
https://codesandbox.io/s/prod-sea-ng305?file=/index.html:255-550
currently it look like this

Answer 1

To maintain the equal height of the div we have to use align-items: stretch property. That will maintain the height of the elements. Please find the code below.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.grid-item {
display: flex;
width: calc(50vw - 0px);
margin: 0 0 1px 0;
}
.card {
width: 100%;
background-color: #eee;
padding: 20px;
}
<div class="grid">
<div class="grid-item">
<div class="card">A very short text.</div>
</div>
<div class="grid-item">
<div class="card">
Debitis nam, porro officia dolorum cupiditate magnam perspiciatis quis
corrupti cumque, est perferendis provident vel accusamus ullam cum
similique. Quasi, quidem beatae. Debitis nam, porro officia dolorum
cupiditate magnam perspiciatis quis corrupti cumque, est perferendis
provident vel accusamus ullam cum similique. Quasi, quidem beatae.
</div>
</div>
<div class="grid-item">
<div class="card">
Officia autem sunt obcaecati voluptas sit, architecto cumque quaerat
aperiam fuga eveniet necessitatibus aliquid eum beatae, mollitia saepe
ab ut!
</div>
</div>
</div>

Answer 2

Here's the answer using flexbox as requested in the post. Though grid is likely an easier answer in terms of making a grid, and as such I included it at the end of the post.
align-items: stretch makes the elements change size on their cross axis (height when flex is set to row, and width when set to column) to stretch to fit. This makes the elements in the flexbox stretch to the same height as the largest element in the row.
Then by setting .card to have a height of 100%, the card will now take up that full height, though setting the .grid-item to use flex instead is also perfectly valid.
CSS Tricks Flex is a good resource for what flexbox can do.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* Makes the scrollbar not take up space so the demo shows on the small runner */
overflow-y: overlay;
}
.grid {
display: flex;
flex-wrap: wrap;
/* Makes the items cross axis of the flexbox stretch to the full size
of the cross axis
*/
align-items: stretch;
}
.card {
background-color: #eee;
padding: 20px;
/* Make the card take the height of it's containing item */
height: 100%;
}
.grid-item {
/* Makes the grid item take up half the width of the page */
width: calc(50vw - 0px);
}
#supports not (overflow: overlay) {
/* Backup to make sure the demo looks good on small runner on all devices
since overlay isn't supported on everything
*/
.grid-item {
width: calc(50vw - 8px);
}
}
<div class="grid">
<div class="grid-item">
<div class="card">
hello
</div>
</div>
<div class="grid-item">
<div class="card">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error molestiae reiciendis voluptate cum fugiat nisi exercitationem quos ipsum iusto dolore. Quasi expedita accusantium at odio repellat explicabo corrupti veniam hic?
</div>
</div>
<div class="grid-item">
<div class="card">
third locthiLorem, ipsum dolor sit amet consectetur adipisicing elit. Error molestiae reiciendis voluptate cum fugiat nisi exercitationem quos ipsum iusto dolore. Quasi expedita accusantium at odio repellat explicabo corrupti veniam hic?
</div>
</div>
</div>
Here's the same but in a grid. It's simpler and uses fewer properties to get the same result.
This is all the CSS Grid related properties set:
.grid {
/* Make the grid use css grid */
display: grid;
/* Make 2 columns, each one fraction of the available width */
grid-template-columns: 1fr 1fr;
}
Though again, we need to set some height for the card because while the grid-item stretches height to fit, the card doesn't.
CSS Tricks Grid is a good resource for CSS Grid.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
/* Make 2 columns, each one fraction of the available width */
grid-template-columns: 1fr 1fr;
}
.card {
background-color: #eee;
padding: 20px;
/* Make the card take the height of it's containing item */
height: 100%;
}
<div class="grid">
<div class="grid-item">
<div class="card">
hello
</div>
</div>
<div class="grid-item">
<div class="card">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error molestiae reiciendis voluptate cum fugiat nisi exercitationem quos ipsum iusto dolore. Quasi expedita accusantium at odio repellat explicabo corrupti veniam hic?
</div>
</div>
<div class="grid-item">
<div class="card">
third locthiLorem, ipsum dolor sit amet consectetur adipisicing elit. Error molestiae reiciendis voluptate cum fugiat nisi exercitationem quos ipsum iusto dolore. Quasi expedita accusantium at odio repellat explicabo corrupti veniam hic?
</div>
</div>
</div>