Set equal height columns using flexbox

Question

I know a solution to create equal height columns using display:table like:

.row {
    display: table;
    width: 100%;
}

.col{
    display: table-cell; 
}

but my case is a bit different, since I am using flexbox and row class has display:flex:

.row {
  display: flex;
  display: ms-flex;
  flex-wrap: wrap;
}

and all cols have .large-4 class:

.large-4 {
   width: 25%;
   max-width: 25%;
  flex: 0 0 30%;
}

I can't use flex:1 for .large-4 as well because it varies in different viewport. here is a snippet of html:

<div class="row">
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
          distinctio
          optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
          veritatis.
        </p>
      </div>
    </div>
  </div>
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </div>
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
          distinctio.
        </p>
      </div>
    </div>
  </div>
</div>

code-pen link can be found here! how to I acheive equal height columns using flexbox? or any other better solution. thanks

Hi, I was answering your carousel question but you deleted it! — ariel
– ariel, Commented Mar 7, 2020 at 16:52
ohh great @ariel, I thought the community didn't welcome it. I am going to undo it — Mir Stephen
– Mir Stephen, Commented Mar 7, 2020 at 16:58

disinfor · Accepted Answer · 2020-03-05 19:54:12Z

1

You need to add display: flex to the .large-4 element:

.large-4 {
   width: 25%;
   max-width: 25%;
   flex: 0 0 30%;
   display: flex;
}

You'll notice when you inspect your elements using the inspector tool, large-4 elements are actually all the same height. It's the content inside that is not. So by making the parent element flex, it will make the children elements fill the space.

answered Mar 5, 2020 at 19:54

disinfor

11.6k2 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

Or just add the d-flex class if they're using Bootstrap 4...

disinfor Over a year ago

That works as well, but they didn't have bootstrap listed as a tag so I went with the ol' property instead :)

Ezra Siton Over a year ago

If you set the flex-basis to 30% (Specifies the initial size of the flex item) - no meaning her for "width: 25%" value.

Blorf · Accepted Answer · 2020-03-05 19:55:24Z

0

You already have equal-height columns, but inside them is a container that is contracting to its content. Expand that container.

.card {
    height: 100%;
}

answered Mar 5, 2020 at 19:55

Blorf

5463 silver badges13 bronze badges

Collectives™ on Stack Overflow

Set equal height columns using flexbox

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related