Create a row of flexbox items with a max height defined by one child

Question

I'm trying to create a flexbox layout that does something I thought would be a little easier, but I'm having trouble finding the right way to do it.

I want to have a row of items with dynamic height that allows one child to grow as tall as need be, but limits the height of the other item so that content is cut off.

I want to use flexbox, so browser issues associated with that are not an issue, but I would like to avoid any use of JavaScript in the solution.

Any ideas? This might be a trivial problem, but I'm having trouble finding anything with the search terms I've been using. Thanks!

Here's a CodePen demo in case you'd like to modify it for use in your answer.

This is my reference flexbox layout:

.row {
    display: flex;
}

.info {
    flex: 0 0 200px;
}

.description {
    flex: 1 1 auto;
}

<div class="row">
    <div class="info">This should grow dynamically</div>
    <div class="description">This should be limited in height by the .info div</div>
</div>

Answer 1

Flexbox can't do that natively but it is possible.

You will need an inner element inside the second child which is positioned absolutely.

Here the extra content is/can be hidden with overflow:hidden...or revealed by adding overflow:auto.

.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border: 2px solid red;
}
.child {
  flex: 1;
  border: 2px solid green;
}
.child:nth-child(2) {
  position: relative;
  overflow: auto;
  /*overflow: hidden; */ /* removed for demo purposes */
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis tenetur, laboriosam! Ab facilis, officia id delectus eaque expedita quia, incidunt eligendi aut, minus temporibus tenetur.</div>
  <div class="child">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
    </div>
  </div>
</div>