动态限制滚动高度答案

【问题标题】：limit the height from scroll dynamically动态限制滚动高度
【发布时间】：2017-01-25 12:49:34
【问题描述】：

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

情况如下：

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

我想将滚动项 div 限制为我的 img-item 的高度。

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

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

参见示例fiddle。

你有什么想法吗？

【问题讨论】：

您有向我们展示问题的 sn-p / fiddle 吗？
还没有，对不起，我正在努力
请查看我在下面创建的示例...

标签： html css scroll flexbox

【解决方案1】：

我猜这就是你要找的 - 将滚动项的内容包装到 absolutely 定位的框中，以便滚动项无法确定高度。

例子：

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

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

【讨论】：