如何使用 flex-grow 的溢出

Question

我有这个代码：

html,
body,
#container {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  background: #ddd;
}

#width {
  width: 200px;
  height: 100%;
  resize: horizontal;
  overflow: hidden;
  background: #eee;
}

#remaining {
  flex-grow: 1;
  overflow: scroll;
}

#resize {
  width: 200px;
  height: 200px;
  resize: both;
  overflow: hidden;
  background: #ccc;
}

<!DOCTYPE html>
<html>

<body>
  <div id="container">
    <div id="width">Width</div>
    <div id="remaining">
      <div id="resize">Resize</div>
    </div>
  </div>
</body>

</html>

这是我想要做的：

您可以调整大小 #width
您可以调整大小 #resize

问题是，当我调整 #resize 大小时，#width 缩小以为它腾出空间。我正在寻找的是当我调整大小时，#remaining 显示滚动条，并且不调整其他任何东西。

我相信这是因为 #remaining 没有 width 属性，而是 flex-grow。所以它允许它改变宽度，因为它没有设置宽度。

我正在寻找一个纯粹的 HTML/CSS 答案，但 JavaScript 也可以。（当然只要它是可靠的，不会崩溃，并且不会使用 setInterval 等方法大幅减慢执行速度）

我还想说，我在 #container 上仅使用 的弹性布局，目的是让 #remaining 占据所有剩余 space，如果删除 display: flex，它仍然可以使用我拥有的完整代码。

Answer 1

如果您放弃 flex:grow 而是在 css 中计算 remaining 的宽度，它会起作用。

.remaining{
   width: calc(100% - 200px);
   overflow-x: auto;
}

有了fiddle

如何使用 flex-grow 的溢出

How to use overflow with flex-grow

html

css

flexbox