CODEWITHSUNDEEP
htmlcssflexbox
Runnick
Runnick

Reputation: 715

Equal height sections within flexbox columns?

I'm using flexbox columns for a pretty basic layout. There is a header, image and a list below. List must have a border and can have varying contents. Is it possible to have those list sections equal height based on the biggest without JavaScript? Or one needs to calculate the biggest section height with JS and apply it to others?

This is what I want:

enter image description here

This is what I have:

enter image description here

.columns {
  display: flex;
}

.col {
  margin-left: 20px;
}

ul {
  margin: 0; 
}

.list {
  padding: 24px;
  border: 1px solid blue;
}
<div class="columns">

  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

</div>

Upvotes: 4

Views: 18807

Answers (2)

Yohanes Isa Ananto Tri Pratiwi
Yohanes Isa Ananto Tri Pratiwi

Reputation: 3

You should set .col as flex too

.col{ display:flex; }

and your class columns is better named row

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371203

Since both columns are inside the same flex container, yes, the list boxes can be the same height (based on the tallest content) using only CSS.

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}
<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

Here are a few more examples:

jsFiddle demo

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}
<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>        
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 7

Related Questions