Limitar la altura de desplazamiento dinámicamente.

No sé cómo limitar la altura desde el div divisor sin fijar la altura máxima.

Aquí está la situación:

Quiero limitar mi div elemento de desplazamiento a la altura de mi img-item.

pantalla: flex no funciona porque da la altura del div más alto (que es el elemento de desplazamiento) altura: 100% y la función automática no funciona tampoco.

Así que no tengo idea de cómo hacerlo sin fijar la altura (por ejemplo: 200px).

Ver ejemplo de violín .

¿Tienes una idea?

Bueno, supongo que esto es lo que está buscando: envuelva el contenido del elemento de desplazamiento en un cuadro posicionado de manera absolute para que el elemento de desplazamiento no llegue a determinar la altura.

Ejemplo:

 *{ box-sizing: border-box; } .wrapper { display: flex; width: 250px; } .wrapper > * { border: 1px solid red; } .scroll-item{ position: relative; overflow-y: auto; flex: 1; } img{ max-width: 100%; vertical-align: top; } .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
 
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.