Child changing width resizes panels

[aaron-hutton]

Hi. Thanks for the library.

I'm trying to work out if this is intended behaviour or not (given everything works with percentages).

I have a horizontal group where one of the panels (right) has content with varying widths. When the content width changes it causes the panels to resize. This results in:

• The whole panel group grows in size, sometimes extending outside of the page
• The left and right panels both change size causing the resize divider to move

This is a test component I've been using which triggers the behaviour.

export function RandomWidthPanel() {
  const [state, setState] = useState(1000);

  return (
    <div className="flex flex-col">
      <Button onClick={() => setState(Math.round(Math.random() * 2000 + 500))}>
        Click me
      </Button>
      <div style={{ width: state }} />
    </div>
  );
}

Is it a bug? Or is there a way for me to restrict the width of the children dynamically when the panels are resized?

[bvaughn]

Your panel's content should not be larger than the panel itself. If it is, that would break the layout in the way you're describing.

Or is there a way for me to restrict the width of the children dynamically when the panels are resized?

I would suggest you use CSS (max-width: 100% or something similar– without knowing more about your use case, it's hard to say).

[bvaughn]

Closing this because it's been answered but if you have a follow up, you can ask.

[aaron-hutton]

Setting a max-width on the children still didn't fix it, the children were controlling the width of the parent, so max-width just grew to the size of the content.

I spent the last hour banging my head against the wall until I found this article. After setting width: 0 on the pane, it works perfectly.