React-split-pane: left pane always start at the page left margin-CodePudding

I have a fixed sidebar. But the right pane has to be split. I used below code segment for that. But the left part of the splitter always stick to the left margin of the page (i.e. sidebar's left margin and split left pane's margin are at the same position). I want to set the left margin of the left pane where the sidebar's right margin is.

    <div className="flex">
      <Sidebar />
      <SplitPane
        split="vertical"
        minSize={256}
        defaultSize={500}
        onChange={(size) => persistSplitterPos(size)}
      >
        <div className="w-full h-page">gggg</div>
        <div className="w-full h-page">sss</div>
      </SplitPane>
    </div>

Sidebar.jsx:

<div class="w-64">
</div>

I tried experimenting with minSize and maxSize. But I couldn't get the desired result.

Here is the codesandbox link.

CodePudding user response：

<SplitPane> that you use, is positioned absolutely, hardcoding left and right style properties to 0px, so by default it attaches itself to the left and right edge of the page and occupies the whole width. In order to gain more control over where the SplitPane gets attached you have to place it in the relatively positioned parent, then absolute positioning of the pane will work in the context of that parent instead of the whole page:

/*styles.css*/
.App {
      font-family: sans-serif;
      text-align: center;
      display: flex;
}

/*App.js*/
<div className="App">
    <div
        style={{
            width: 256,
            backgroundColor: "#d5f5cf"
        }}
    >
        Sidebar
    </div>
    <div
        style={{
            position: "relative",
            width: "100%"
        }}
    >
        <SplitPane>
            <div style={{ backgroundColor: "#d5f5cf" }}>Left-Pane</div>
            <div style={{ backgroundColor: "#f4edba" }}>Right-Pane</div>
        </SplitPane>
    </div>
</div>