Pane content does not appear to be rendered (v3)

[maurice]

Describe the bug

Pane children are not rendered with v3

To Reproduce

See codesandbox example: https://codesandbox.io/p/sandbox/sp59gp?file=%2Fsrc%2FApp.tsx%3A1%2C1-19%2C1

If you can't see that the code is just this, basically the "controlled" example code with a few tweaks

import { SplitPane, Pane } from "react-split-pane";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [sizes, setSizes] = useState([300, 500]);

  return (
    <SplitPane onResize={setSizes} direction="vertical">
      <Pane size={sizes[0]} minSize="200px">
        <div>top</div>
      </Pane>
      <Pane size={sizes[1]}>
        <div>bottom</div>
      </Pane>
    </SplitPane>
  );
}

(Also the codesandbox project you suggest to fork is using the older 0.1.82 version, so should probably be updated.)

Expected behavior

The pane content should be rendered

Screenshots

[tomkp]

This issue has been addressed with the following improvements:

1. Documentation for container sizing (PR docs: add container sizing documentation #866): Added a new "Container Sizing" section to the README explaining the requirement for parent containers to have explicit dimensions. This is the most common cause of invisible panes, especially with vertical splits.

2. Updated bug report template (PR docs: update bug report template for v3 #867): Removed the outdated v0.1.x CodeSandbox link and added guidance to use v3.x with the new <Pane> component API.

For your specific issue: The most likely cause is that your container lacks an explicit height. For vertical splits, ensure the parent has a defined height:

// Add height to parent container
<div style={{ height: '100vh' }}>
  <SplitPane direction="vertical" onResize={setSizes}>
    <Pane size={sizes[0]} minSize="200px">
      <div>top</div>
    </Pane>
    <Pane size={sizes[1]}>
      <div>bottom</div>
    </Pane>
  </SplitPane>
</div>

See the Container Sizing section in the README for more details.

[tomkp]

@maurice I hope that helps - feel free to re-open if not!