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

Question

Obviously, how to make two divs the same height tallest with flexbox.

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

For example, I have two divs in a row, the first div height depends on the size of the image inside. So I want to set the height of the second div equally.

Answer 1

So, I want the height of the second div to be the same.

And anyone who exceeds this height will be disabled or create a scrollbar for the second flex column ...?

I do not know how this is possible using any of the flexbox properties.

Id, , , , , overflow hidden auto, , .

.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>

Hide result

Answer 2

, , , .

, , , 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>

Hide result