html flex布局 如何将其某几个子元素设置在固定位置，然后其余元素填充剩余空间？

想要实现的效果是左右两个div，中间有个拖拽条(也是个div)，鼠标左右拖拽中间的div后，左右的div会随之改变width

flex布局中一般div的position是根据左侧元素的位置宽度来决定的，也就是说上述需求其实可以通过 “拖拽中间div时，修改左侧div宽度” 来实现，但这种变化其实不太对，按理拖拽操作只应该作用在拖拽条上，仅改变其位置，然后左右div自动响应变化进行缩放，而不是先缩放左右div，让拖拽条去自适应位置

通过调整左右div尺寸来改变拖拽条位置也可能会导致精度问题，因为需要将拖拽条的移动距离转换成左右div的宽度，如果宽度是px还好，但是%的话，可能拖拽久一点拖拽条就会偏离鼠标的位置了

所以有没有办法在flex布局中实现这种效果？如果flex不行，那么有没有别的布局可以实现，实在没有那就只能自己写逻辑了。。

简单测试Demo，类名drag是拖拽条，第一个拖拽条移动时，第二个拖拽条应保持固定

<div class="row">
  <div class="block">
    111
  </div>
  <div class="drag"></div>
  <div class="block">
    222
  </div>
  <div class="drag"></div>
  <div class="block">
    333
  </div>
</div>

<style>
.row {
  display: flex;
  width: 50%;
}
.block {
  background-color: red;
  flex:auto;
}
.drag {
  background-color: green;
  flex: none;
  width: 10px;
}
</style>

如果只有两个使用flex应该很容易，一边固定一遍弹性，多个的话可以嵌套试试，第一个拖拽就改变第一个固定框的大小，第二个就改变左边第一个和第二个框合起来的固定框的大小，没尝试过，不过应该有一定可行性。

img