Make rows in different Flexbox columns the same height

Question

I would like to create three columns in Flexbox (similar to pricing plans).

Each column has a many rows with different text lengths. Is there a way to make all rows in each column the same height?

<div class="outer">
  <div class="column">
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
  </div>
  <div class="column">
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text others</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
  </div>
  <div class="column">
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than dsd sdsd d d</div>
    <div class="text">Some text</div>
    <div class="text">Some text</div>
    <div class="text">Some text more than</div>
  </div>
</div>



.outer {
  display: flex;
  height: 700px;
}

.column {
  display: flex;
  algin-items: stretch;
  margin-right: 15px;
  background-color: green;
  flex-direction: column;

}

.text {
  background: red;
  width: 50px;
  margin: 5px;
}

I cannot use CSS grid, and I want to have the structure like in the example. So essentially all rows should have the same height but should be in a different "column" wrapper.

Example

No, this is not possible. There is NO *current* CSS method to equalise heights of elements that do not share a parent. - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Nov 04 '19 at 16:19
grid can be a possibility : https://codepen.io/gc-nomade/pen/ExxQLGR — G-Cyrillus, Nov 04 '19 at 19:40
@Paulie_D thanks, when you make this to an answer I can accept it? — supersize, Nov 05 '19 at 07:42

David Taiaroa · Answer 1 · 2019-11-04T19:45:40.507

What if you came to this from the other direction and created flex rows? https://codepen.io/panchroma/pen/qBBxpdx

Then you adjust the widths of the flex items as required so it looks like you have columns?

HTML

    <div class="outer">
  <div class="row">
    <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
  <div class="row">
    <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
  <div class="row">
     <div class="text">Some text</div>
    ...
    <div class="text">Some text more than</div>
  </div>
</div>

** CSS **

.outer {
/*   display: flex; */
/*   height: 700px; */
/*   flex-direction:column; */
}

.row {
  display: flex;
/*   algin-items: stretch; */
  margin-right: 15px;
  background-color: green;
  width:180px;
  flex-wrap:wrap
}

.text {
  background: red;
  width: 50px;
  margin: 5px;
}

Nice idea but I need the rows to be responsive ...

Here's another idea: https://codepen.io/panchroma/pen/bGGLMwG

or option(3), would a CSS table be appropriate for your content?

Hope this helps!

Nice idea but I need the rows to be responsive, like that the rows will wrap to a new line and destroy the intended behaviour of a table style layout. — supersize, Nov 04 '19 at 17:21
Thanks again, the other idea is simple but isn't to column direction. CSS grid would work but I cannot use it due to IE 11 support. — supersize, Nov 05 '19 at 07:42

Make rows in different Flexbox columns the same height

1 Answers1