在设置了max-height的div内滚动div

I am trying to make a div that scrolls its content inside of a div with has height: auto and max-height:(heightpx); set on it. I noticed that if I set height to be a value and remove the max-height it works.

我正在尝试创建一个div，它在div中滚动其内容，其高度为：auto和max-height：（heightpx）;设置它。我注意到如果我将高度设置为一个值并删除它的最大高度。

<div style="height:auto; max-height:200px; background:red;">
<div class="fill">
    <div class="fill">
        <div class="fill">
            <div class="scrolly" style="height: calc(100% - 45px)">
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
            </div>
        </div>
    </div>
</div>

.scrolly {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

.fill {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

Here is a jsfiddle http://jsfiddle.net/szze6a66/

这是一个jsfiddle http://jsfiddle.net/szze6a66/

4 个解决方案

#1

overflow-y: auto

overflow-y：auto

<div style=" max-height:200px; background:red; overflow-y:auto">

http://jsfiddle.net/djktzyec/

hope this helps

希望这可以帮助

#2

you just need overflow-y: auto and set the height.

你只需要overflow-y：auto并设置高度。

.scrolly {
    overflow-y: auto;
    position: relative;
    max-height: 200px;
}

#3

You've applied the scrolly class to the wrong div. Remove it from the div it's on in your example and add it to the parent div.

您已将scrolly类应用于错误的div。从示例中的div中删除它，并将其添加到父div。

#4

-1

As the main div has max-height:200px then you can set the tag with .scrolly class to max-height: 200px then it will scroll instead of overflowing the container.

由于主div具有max-height：200px，因此您可以将.scrolly类的标记设置为max-height：200px然后它将滚动而不是溢出容器。

.scrolly {
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  max-height: 200px;
}
.fill {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div style="height:auto; max-height:200px; background:red;">
  <div class="fill">
    <div class="fill">
      <div class="fill">
        <div class="scrolly">
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
        </div>
      </div>
    </div>
  </div>
</div>

#1