<div class="container">
  <div class="inner1">inner1固定高度200px</div>
  <div class="inner2">
    inner2自动填充剩余高度
    <!--想要inner2填充剩余高度且不能超出容器，为 inner2 加上 class:fix -->
    <div class="inner2-content">内容过高，导致 inner2 撑出了容器</div>
  </div>
</div>
.container {
  width: 456px;
  height: 0; /*任意高度*/
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
.inner1 {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border: 1px solid orange;
  box-sizing: border-box;
}
.inner2 {
  width: 100%;
  flex: 1 1 0%;
  border: 1px solid green;
  box-sizing: border-box;
}
.inner2-content {
  height: 200px;
  width: 200px;
  background: #d4b8b4;
}
.fix {
  height: 0;
  overflow: auto;
}

document
  .querySelector(".container")
  .setAttribute("style", `height:${Math.random() * 100 + 280}px`);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.