CSS Flexbox: reducir a lo largo del eje transversal y mostrar la barra de desplazamiento

En mi sitio web tengo un contenedor de caja flexible con una imagen (ancho y alto fijo) y un texto a su lado (sin ancho fijo). ¿Cómo puedo evitar que el texto sea más alto que la imagen y mostrar una barra de desplazamiento cuando es más alto? Por favor, vea también fragmento de código a continuación.

Ejemplo:

.recipe-article{ display: flex; } .recipe-img { flex: 0 0 265px; } .recipe-text{ flex: 1; max-height: 265px; } 
 

Name

*****

Ingredient1, Ingredient2

Süß, Cremig

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

La siguiente es la solución para ti. overflow-y: auto; to .recipe-text hará que el .recipe-text pueda desplazar.

 .recipe-article{ display: flex; } .recipe-img { flex: 0 0 265px; } .recipe-text{ flex: 1; max-height: 265px; overflow-y: auto; } 
 

Name

*****

Ingredient1, Ingredient2

Süß, Cremig

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

¿Algo como esto? https://fiddle.jshell.net/hzsjLnj1/ Solo agregue un overflow auto

Give overflow: auto; a la .recipe-text . Mira el violín

http://jsfiddle.net/shubhambhave/86hjc632/