CSS: limit the height from scroll dynamically

Question

I don't know how to limit the height from scroll div without fixing the max-height.

Here is the situation:

<div>
  <div class="img-item"><img></div>
  <div class="scroll-item"></div>
</div>

I want to limit my scroll-item div to the height of my img-item.

display: flex doesn't work because it gives the height of the heighest div (which is the scroll item) height:100% and auto don't work neither.

So i have no idea how to do that without fixing the height (ex: 200px).

See example fiddle.

Do you have an idea?

Answer 1

Well I guess this is what you are looking for- wrap the contents of the scroll item into an absolutely positioned box so that the scroll item does not get to determine the height.

Example:

*{
  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%;
}
  

<div class="wrapper">
  <div class="img-item">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="scroll-item">
    <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>

Check this out and let me know your feedback on this. Thanks!