Flex - Having side by side subcontainers of the same height

Question

So here's the problem https://jsfiddle.net/anaegm/kn6cwfd8/

What I have is two tiles that its subcontainers, the buttons and the copy, need to have the same automatic height (taking the largest one), looking something like this:

What is actually happening:

Even though I have both the 'copy' and 'buttons' <div>'s set as 100% for height, it doesn't stack up "in order", but rather stretching to fit in the parent wrapper. Playing around I noticed that if I remove the 100% height from the buttons, and remove one button, the copy will fill out so both will be the same height, but the scenario I'm working has one tile with one more button than the other... So basically, is what I'm trying to do feasible with flex?

I think you should use display:table, display:table-row, display:table-cell — DraganAscii, Sep 07 '17 at 18:58

score 0 · Answer 1 · answered Sep 07 '17 at 19:06

.item {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  width: 300px;
  height: 500px;
}

.item p {
  flex: 1;
}

.item div,
.item img {
  flex: 0 0;
}

<div class="item">
  <img src="http://placehold.it/300x180">
  <p>
    Lorem Ipsum
  </p>
  <div class="button">
    <button>button1</button>
    <button>button2</button>
    <button>button3</button>
  </div>
</div>

Flex - Having side by side subcontainers of the same height

1 Answers1