[Breaking Change] Panel CSS changed from width/height: 100% to flex-grow: 1 in v4.5.x - breaks existing layouts

[jonathan-pyt]

Description

After upgrading from 4.4.1 to 4.5.2, existing layouts are broken due to an undocumented CSS change in the <Panel> component.

Breaking Change

Before (v4.4.1)

The div generated by <Panel> had:

width: 100%;
height: 100%;

After (v4.5.2)

The div generated by <Panel> now has:

flex-grow: 1;

Impact

This change breaks layouts where child components relied on the panel having explicit width: 100% and height: 100%. Children no longer stretch to fill the available space as expected.

Reproduction

<Group orientation="horizontal">
  <Panel id="main">{children}</Panel>
  <ResizeHandle />
  <Panel id="sidebar" minSize="300px">
    <Sidebar />
  </Panel>
</Group>

In v4.4.1, {children} would fill the entire panel space.
In v4.5.2, {children} may not fill the space correctly depending on their CSS.

Request

1. Document this breaking change in the changelog/release notes
2. Consider adding a migration guide for users upgrading from v4.4.x to v4.5.x
3. Clarify if this change was intentional and the reasoning behind it

Environment

• react-resizable-panels: upgraded from 4.4.1 to 4.5.2
• React: 18.x

[bvaughn]

It was a bug fix and it was documented in the change log and associated PR #622.

I’m sorry that this change caused styling troubles for you. Please remember though that this project has only one contributor (me) and I’m not compensated for building or maintaining it.

If you’d like me to take a look, share a runnable repro and I’ll look.

[jonathan-pyt]

Thank you for the quick response, and I appreciate all the work you put into this project!

I apologize if my tone came across as demanding - that wasn't my intention. I understand the challenges of maintaining an open source project solo.

Here are two StackBlitz reproductions:

• v4.4.1 (previous behavior): 4.4.1
• v4.5.2 (current behavior): 4.5.2

In the v4.4.1 example we have a scroll in the datagrid. In 4.5.2 we have no horizontal scroll in the datagrid.

I'll check PR #622 to better understand the change. Thanks again for your time!

[bvaughn]

No worries 😌 Thanks for the repros

I’m at the office now, but I’ll take a look when I get home this evening. (let me know if you figure out anything before then!)

[jonathan-pyt]

Yep I already found a workaround

In v4.5.2, adding width: '100%' to the Panel style fixes the scroll behavior:

  <Panel id="main" style={{ width: '100%' }}>                                                                                                                                                                  
    <h2>Main Panel</h2>                                                                                                                                                                                        
    <div style={{ maxHeight: 400 }}>                                                                                                                                                                           
      <DataGrid rows={rows} columns={columns} />                                                                                                                                                               
    </div>                                                                                                                                                                                                     
  </Panel>  

Without width: '100%', the content doesn't constrain properly and horizontal scrolling breaks (tested with MUI DataGrid, haven't tried other components)

[bvaughn]

I suspect a fix on my end that would not regress the fix from #622 would be to add max-width: 100% (and max-height: 100%) to the panel's inner div element (#633)

Here's a build that makes that change: react-resizable-panels@4.5.3-alpha.0

Can you confirm if it fixes the problem you've raised @jonathan-pyt?

[jonathan-pyt]

Just tested react-resizable-panels@4.5.3-alpha.0 - it fixes the issue !

Thanks for the quick turnaround on this fix ! Really appreciate it.

[bvaughn]

This fix has been published in 4.5.3.

---

❤️ → ☕ givebrian.coffee