具有弹性显示的可调整大小的项目

Question

我正在尝试将页面作为连续可调整大小的框格。除了尝试重新调整flex项目时，我使用适合此任务的flex显示。盒子边框突然跳到其他地方。

下面的简单代码显示了这种行为：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
  border-style: solid;
  overflow: auto;
}

.box {
  position: relative;
  min-width: 10px;
  max-width: 95%;
  height: 100%;
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
  border-style: solid;
  flex: 1000 1000 auto;
}

.resize {
  resize: horizontal;
  overflow: auto;
}

<div class="container">
  <div class="box resize" style="background:   red;">A</div>
  <div class="box resize" style="background: green;">B</div>
  <div class="box" style="background:  blue;">c</div>
</div>

提前感谢任何解决方案。