Setting equal height for divs with flexbox(depending on the shortest one)

Question

Its obvious how to make two divs the same height of the tallest one with flexbox.

But for me it's not clear how to set equal height, depending on the shortest div.

For example i have two divs in a row, first div height is dependent on the size of image inside. So i want to set height of second div the same.

Please post JavaScript/jQuery, CSS, and HTML that would be relevant to your question. Create a demo using any or all of the following services: [jsFiddle.net](https://jsfiddle.net/), [CodePen.io](https://codepen.io/), [Plunker.co](http://plnkr.co/), [JS Bin](https://jsbin.com/) or a snippet (7th icon located on the text editor toolbar or CTRL+M). — zer00ne, Feb 14 '16 at 01:25
You switched accepted answer, which of course is okay, just curious what was wrong with mine? — Asons, Feb 14 '16 at 10:17
@LGSon, at first, thanks for your answer, i really appreciate it. Both answers are equally correct and have the same principle, but CBroe's answer is more informative(i mean the part how to handle exceeding content of the second div). — musha, Feb 14 '16 at 10:36

Asons · Answer 1 · 2016-02-14T01:54:27.840

For a flex item to scroll, a height is needed, or else it will just grow with its content.

So to overcome that, you solve it like this, where you set the inner element to position: absolute.

.wrap {
  display: flex;
}

.left {
  flex: 1;
  border: 1px solid gray;
}

.right {
  flex: 1;
  border: 1px solid gray;
  position: relative;
}

.text {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="wrap">
  <div class="left">
    <img src="http://lorempixel.com/200/200/city/7" alt="" >
  </div>
  <div class="right">
    <div class="text">
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
    </div>
  </div>
</div>

score 3 · Accepted Answer · answered Feb 14 '16 at 01:41

So i want to set height of second div the same.

And have any content that exceeds that height be cut off, or create a scrollbar for the second flex column …?

I don’t know how that would be possible using any of the flexbox properties.

I’d probably solve this by putting an absolutely positioned element inside the second flex item, so that it stretches from top to bottom and left to right, and then set overflow on that element to hidden or auto, depending on what exactly the desired effect is.

.flex-container { display:flex; }
.flex-item { flex:0 0 50%; position:relative; }
.flex-item img { display:block; max-width:100%; width:100%; height:auto; }
.flex-item-inner { position:absolute; top:0; left:0; right:0; bottom:0; overflow:auto; }
.flex-item-inner p:first-child { margin-top:0; }

<div class="flex-container">
  <div class="flex-item">
    <img src="http://placehold.it/350x150">
  </div>
  <div class="flex-item">
    <div class="flex-item-inner">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

thanks a lot for your answer, now i have a small issue with vertical centering content inside container, the problem is absolute positioned div do not save its height, when i add "align-items:center" to container for vertical centering. https://jsfiddle.net/43o1dtsv/2/ Do i need to create another post for that issue, or its just another string to original code? Thanks ;) — musha, Feb 14 '16 at 20:19
To be able to use `align-items`, you need to make the inner item a flex container again: https://jsfiddle.net/515u476m/ — CBroe, Feb 15 '16 at 09:55

Setting equal height for divs with flexbox(depending on the shortest one)

2 Answers2

Linked