css - 如何在尊重 Internet Explorer 11 中的最大高度继承的同时滚动固定标题下的内容？

Question

我有一个最大高度的容器。我想在其中放置一个标题和一个滚动体。这在大多数浏览器中都很简单，但我在 IE11 上苦苦挣扎。使用 max-height: inherit;，.scroll div 及其滚动条延伸到其父级下方(参见 IE11 中的代码片段)

It's trivial using flexbox instead ，但是IE11有一个bug需要改变body的显示才能解决。但我不能那样做。

有没有办法让 .scroll 在没有 flexbox 的情况下在 IE11 中正确滚动，同时尊重容器上的 max-height 功能？

div {
  border: 1px solid #DDD;
}
.container {
  max-height: 150px;
  overflow: hidden;
}
.header {
  height: 40px;
}
.scroll {
  max-height: inherit;
  overflow: auto;
}

  <div class="container">
    <div class="header">
      header
    </div>
    <div class="scroll">
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
    </div>
  </div>

Answer 1

这似乎不是 IE 的特定问题，我在 Chrome 上也看到了同样的问题。 您的容器高度为 150 像素(因为它来自第三方框架，我们无法更改此数字)，因此“滚动”元素的高度应为 150 像素 - 40 像素 = 110 像素。让我们设置它而不是“继承”:

div {
  border: 1px solid #DDD;
}
.container {
  max-height: 150px;
  overflow: hidden;
}
.header {
  height: 40px;
}
.scroll {
  max-height: 110px;
  overflow: auto;
}

  <div class="container">
    <div class="header">
      header
    </div>
    <div class="scroll">
      <div>scroll first</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll last</div>
    </div>
  </div>

一切正常(我已经在 IE 和 Chrome 上测试过)