Cree una fila de elementos de Flexbox con una altura máxima definida por un niño

Intento crear un diseño de Flexbox que haga algo que pensé que sería un poco más fácil, pero tengo problemas para encontrar la forma correcta de hacerlo.

Quiero tener una fila de elementos con altura dinámica que permita que un niño crezca tan alto como sea necesario, pero limita la altura del otro elemento para que se corte el contenido.

Una ilustración del diseño deseado

Quiero usar flexbox, por lo que los problemas del navegador asociados no son un problema, pero me gustaría evitar el uso de JavaScript en la solución.

¿Algunas ideas? Esto podría ser un problema trivial, pero estoy teniendo problemas para encontrar algo con los términos de búsqueda que he estado usando. ¡Gracias!

Aquí hay una demostración de CodePen en caso de que quiera modificarla para utilizarla en su respuesta.

Este es mi diseño de flexbox de referencia:

.row { display: flex; } .info { flex: 0 0 200px; } .description { flex: 1 1 auto; } 
This should grow dynamically
This should be limited in height by the .info div

Flexbox no puede hacer eso de forma nativa, pero es posible.

Necesitarás un elemento interior dentro del segundo niño que esté completamente posicionado.

Aquí el contenido extra se puede / puede ocultarse con overflow:hidden … o revelado agregando 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%; } 
 
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.
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.