Width is not calculated properly when <Panel> is set with overflow property

[rangelojc]

I noticed there are some weird scenarios where width is not calculated properly with overflow visible property.

Consider this

<PanelGroup direction="horizontal" style={{ width: "500px" }}>
  <Panel defaultSize={25} style={{ background: "red" }}>
    CONTENT A
  </Panel>
  <PanelResizeHandle />
  <Panel
    defaultSize={25}
    minSize={10}
    style={{ overflow: "visible", background: "yellow" }}
  >
    <div style={{ width: "500px" }}>CONTENT B</div>
  </Panel>
</PanelGroup>

In this case, since CONTENT B is set at 500px, it takes the entire panel group and becomes unadjustable. If we set it to 250px, then it takes half the screen and cannot be adjusted.

My initial assumption is the content should just overflow, regardless of the panel's width. But I am not sure if this is in line with the author's goals.

---

Real world use case:

In some cases you want a popover, a modal, or something else that lives within the Panel's component structure, this can be far down the list but is absolutely positioned to be rendered beyond the bounds of the Panel.

The default behavior is all contents are hidden outside the Panel's bounds.

Quickest solution is to used a fixed position for any target element, but this means the element in question will no longer adjust on panel resize.

[bvaughn]

This library is built on top of flexbox layout. What you're describing sounds like a behavior of flexbox, as I think the following Code Sandbox demonstrates: https://codesandbox.io/p/sandbox/wj6stg

I don't think this is something I should try to work around. (I'm not even sure that I could work around it without dramatically changing how I handle layout.) I'd suggest using a portal or something if you want content to exceed the boundaries of its parent panel. 😄