Setting Equal Height For Divs With Flexbox(depending On The Shortest One)

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

Solution 1:

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>

Solution 2:

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>