为什么这个例子中两个窗格元素之间的分隔符“偏向”第二窗格？我所说的偏置是指拖动调整大小手柄会导致手柄从光标所在的位置向左对齐，在拖动时将其拉到一边。在窗格上设置flex:none会导致拖动调整大小正常工作，但内容会溢出父元素，这是我不希望看到的。有没有一种方法可以在没有任何JS的纯CSS中解决这个问题？

div#main-panel {
  flex: auto;
}

.horizontal-container {
  display: flex;
  flex-flow: row nowrap;
}

.pane {
  overflow: auto;
  border: solid black;
  flex: 1 1 auto;
}

.left-pane {
  min-width: 10%;
  max-width: 50%;
  border: solid red;
  resize: horizontal;
}

<div class="horizontal-container" id="main-panel">
  <div class="pane left-pane">
    sample text
  </div>
  <div class="pane secondary-pane">
    loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong loooooooooooooooooooooooooooong
  </div>
</div>