How to use overflow with flex-grow-CodePudding

I have this code:

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>

Here is what I am trying to make:

You can resize #width
You can resize #resize

The issue is that when I resize #resize, #width shrinks to make room for it. What I am looking for is when I resize, #remaining shows a scroll bar, and doesn't resize anything else.

I believe that this is happening because #remaining doesn't have a width property, but instead flex-grow. And so it allows it to vary in width, because it doesn't have a set width.

I am looking for a pure HTML/CSS answer, but JavaScript would work too. (of course as long as it is reliable, won't break, and doesn't massively slow down execution using methods such as setInterval)

I also do want to say that I am using a flex layout on #container only for the purpose of making #remaining take up all of the remaining space, and if display: flex is removed, it would still work with the full code that I have.

CodePudding user response：

If you abandon the flex:grow and instead calculate the width of remaining in the css it works.

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

With a fiddle