<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: 0; /*任意宽度*/
  height: 300px;
  border: 1px solid #ccc;
  display: grid;
  grid-template-columns: 200px auto;
}
.inner1 {
  height: 200px;
  border: 1px solid orange;
  box-sizing: border-box;
}
.inner2 {
  height: 200px;
  border: 1px solid green;
  box-sizing: border-box;
}
.inner2-content {
  height: 100px;
  width: 300px;
  background: #D4B8B4;
}
.fix {
  width: 100%;
  overflow: auto;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.