使用溢出限制 div 高度:滚动浏览父级，溢出:隐藏

Question

我有以下CSS问题：

.outer{
  height: 100%;
  overflow: hidden;
 }
.inner{
  overflow-y: scroll;   
}

<div id="outer"> 
  <div>some dynamic content with unknown height</div> 
  <div id="inner">  
    some dynamic content with unknown height
    </div>
  </div>

所以我希望外部div 适合窗口的高度，但我的内部div 应该是可滚动的。问题是，我无法给内部div 一个固定的高度值，因为它充满了动态内容。溢出滚动显然确实需要一个高度值才能工作，但我无法提供。我对内部div 高度的唯一（理论上）限制是外部div。我不能使用相对于父母身高的高度，因为我不知道前面的div 的高度。

Answer 1

您可以使用

flexbox来解决这个问题

请注意，我将id更改为class以匹配您的 CSS 规则

html, body {
  margin: 0;
}
.outer {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: lightgray;
}
.inner {
  flex: 1;
  overflow-y: scroll;
  background: lightgreen;
}

<div class="outer">
  <div>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
  </div>
  <div class="inner">
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
  </div>
</div>