html - 使用 Overflow :Scroll through parent with overflow:hidden 限制 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 一个固定的高度值，因为它充满了动态内容。 Overflow-Scroll 显然确实需要一个高度值才能工作，我无法提供。我对内部 div 高度的唯一(理论上)限制是外部 div。我不能使用相对于 parent 高度的高度，因为我不知道前面的 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>