React-split-pane左面板始终贴页面左边缘，如何调整至侧边栏右侧？

问题原因 #

你使用的react-split-pane组件默认采用绝对定位，脱离了正常文档流，因此外层的flex布局规则对它不生效，会直接对齐页面左上角，和固定宽度的侧边栏重叠。你调整minSize/maxSize没有效果，是因为这两个参数控制的是SplitPane内部两个子面板的尺寸阈值，和SplitPane本身在页面的定位无关。

解决方案 #

推荐用外层容器适配的方案，灵活性更高，不需要硬编码侧边栏宽度：

1. 在SplitPane外层包裹一个自适应宽度的容器，占满侧边栏以外的所有剩余宽度
2. 给这个外层容器设置相对定位，让SplitPane的绝对定位以这个容器为基准，而不是整个页面

修改后的代码如下：

<div className="flex h-screen">
  <Sidebar />
  {/* 新增自适应剩余宽度的容器 */}
  <div className="flex-1 relative h-full">
    <SplitPane
      split="vertical"
      minSize={256}
      defaultSize={500}
      onChange={(size) => persistSplitterPos(size)}
    >
      <div className="w-full h-full">gggg</div>
      <div className="w-full h-full">sss</div>
    </SplitPane>
  </div>
</div>

如果不想新增外层容器，也可以直接给SplitPane添加style属性，手动指定左侧边距等于侧边栏宽度：

<SplitPane
  split="vertical"
  minSize={256}
  defaultSize={500}
  onChange={(size) => persistSplitterPos(size)}
  style={{left: '256px'}} // 侧边栏宽度为w-64即256px
>

内容的提问来源于stack exchange，提问作者Lakmal Premaratne