CODEWITHSUNDEEP
htmlcssflexbox
Mir Stephen
Mir Stephen

Reputation: 1927

Set equal height columns using flexbox

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

Upvotes: 0

Views: 367

Answers (2)

Blorf
Blorf

Reputation: 546

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

.card {
    height: 100%;
}

Upvotes: 0

disinfor
disinfor

Reputation: 11558

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.

Upvotes: 1

Related Questions