动态限制滚动的高度 [英] limit the height from scroll dynamically

问题描述

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

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

这里是情况:

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

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

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

显示:flex 不起作用，因为它给出了最高度的div的高度(这是滚动项) 高度:100％和自动都不起作用.

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.

所以我不知道在不固定高度的情况下该怎么做(例如:200px).

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

请参见示例小提琴.

你有个主意吗?

推荐答案

好吧，我想这就是您要寻找的内容-将滚动项的内容包装到absolute ly定位的框中，以便滚动项不会确定高度.

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.

示例:

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

这篇关于动态限制滚动的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！