使用溢出限制 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>