html - 动态限制滚动高度

Question

我不知道如何在不固定最大高度的情况下限制滚动 div 的高度。

情况是这样的:

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

我想将我的 scroll-item div 限制为我的 img-item 的高度。

display: flex 不起作用，因为它给出了最高 div 的高度(即滚动项)height:100% 和 auto 都不起作用。

所以我不知道如何在不固定高度(例如:200px)的情况下做到这一点。

参见示例 fiddle .

你有什么想法吗？

Answer 1

好吧，我想这就是您要找的东西 - 将滚动项的内容包装到一个绝对定位的框中，这样滚动项就不会确定高度。

例子:

*{
  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>

检查一下，让我知道您对此的反馈。谢谢!