Question

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

情况如下：

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

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

display：flex 不起作用，因为它给出了最高div（这是滚动项）的高度 身高：100％且自动都不会工作。

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

参见示例fiddle。

你有什么想法吗？

Answer 1

嗯，我想这就是你要找的东西 - 将滚动项的内容包装到一个absolute位置框中，这样滚动项就无法确定高度。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

限制动态滚动的高度

1 个答案: