Flex布局中remaining-height元素超出父容器问题求助

现有以下HTML和CSS代码，container-div固定高度100px，其中fixed-height元素占15px，预期remaining-height元素占据剩余的85px高度，但由于内部grand-child-div高度为200px，导致remaining-height超出了container-div的范围。需要实现remaining-height严格保持剩余高度，且内部内容超出时支持滚动。

原代码 #

HTML #

<div class="container-div" style="height:100px">
  <div class="fixed-height">
  </div>
  <div class="remaining-height">
    <div>
      <div class="grand-child-div" style="height:200px">  
      </div>
    </div>
  </div>
</div>

CSS #

.remaining-height {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    background-color: yellow;
}

.fixed-height {
  height: 15px;
  background-color: green;  
}

解决方案 #

要实现需求，只需对代码做两处关键修改：

1. 给容器container-div添加Flex布局
   remaining-height的flex:1属性仅在父元素为Flex容器时生效，因此需要给container-div设置垂直方向的Flex布局，让子元素按垂直方向分配空间：

.container-div {
  height: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止容器被内部元素意外撑开 */
}

2. 给remaining-height添加滚动属性
   为让remaining-height内部内容超出时自动出现滚动条，需为其添加overflow: auto：

.remaining-height {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    background-color: yellow;
    overflow: auto; /* 关键：内容超出时显示滚动条 */
}

完整代码示例 #

HTML #

<div class="container-div">
  <div class="fixed-height">
  </div>
  <div class="remaining-height">
    <div>
      <div class="grand-child-div" style="height:200px">  
      </div>
    </div>
  </div>
</div>

CSS #

.container-div {
  height: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.remaining-height {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    background-color: yellow;
    overflow: auto;
}

.fixed-height {
  height: 15px;
  background-color: green;  
}

修改后，remaining-height会严格占据container-div的剩余高度（85px），当内部grand-child-div高度超过85px时，remaining-height会自动出现滚动条，不会超出容器范围。

内容的提问来源于stack exchange，提问作者Anonymous Creator