CSS: limite la altura del desplazamiento dinámicamente

No sé cómo limitar la altura de desplazamiento div sin fijar la altura máxima.

Aquí está la situación:

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

display: flex no funciona porque da la altura del div más alto (que es el elemento de desplazamiento) altura: 100% y auto no funciona tampoco.

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

Ver ejemplo violín .

¿Tienes una idea?

Bueno, supongo que esto es lo que estás buscando: envuelve el contenido del elemento de desplazamiento en un cuadro de posición 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.