[Bug?] Dockview does not resize on restoring window from maximized in flexbox

[tjcouch-sil]

Hello again!

Issue

I am having trouble restoring the Dockview from maximized when it is inside a div with display: flex . When I maximize the window, the Dockview properly resizes to fit the window size. However, when I restore the window from maximized, the Dockview does not seem to resize to fit the window size. It seems to stay the full size of the window (its previous size) and overflow/create scroll bars.

Sandboxes

The following sandboxes illustrate the issue. I added a div above the DockviewReact to take up some space, and I repeated the text in the panel 100 times and added a scroll bar to scroll up and down within the panel. Then I created a div that wraps the DockviewReact according to the documentation instructions regarding the Dockview resizing to fit the contents of its parent element. The two sandboxes illustrate what happens when the wrapping div is set to flex-grow: 1 (sandbox 1) versus when the wrapping div is set to height: calc(100% - 31px) in order to clamp the height to a fixed value:

Sandbox: Flex-grow Sandbox: Calculated height

I would expect only one scroll bar to show on the screen - within the panel - at any given point. However, in the Flex-grow sandbox, another scroll bar appears outside the panel when the window is maximized and then restored because the dockview does not seem to resize to fit the window size.

Repro Steps

1. Open one of the Sandbox links above
2. Click Open in New Window in the top right of the preview window on the right
3. Pull the new tab out into its own window
4. Refresh the new window
5. Notice the new window has one scroll bar in the panel (expected)
6. Maximize the new window and notice it again has one scroll bar (expected)
7. Restore the new window from maximized
8. (Flex-grow only) Notice it now has two vertical scrollbars and one horizontal scrollbar because the dockview seems not to have resized (unexpected)
9. (Calculated height only) Notice it again has one scroll bar (expected)
   • Related but not exactly relevant note: I am not sure when or why this happens as it seems the dockview does resize in this case, but it seems sometimes the extra scroll bars appear with just a pixel or two of scrolling. Maybe it did not quite resize small enough or something?

Thank you very much for your time and consideration!

[mathuo]

I believe if you include the style overflow: hidden to the parent container (in your example this would be dockStuff) this should fix your problem? I will check the examples though to see exactly why this is happening.

[tjcouch-sil]

That seems to have fixed the problem! I created a sandbox to make sure all four edges of the panel were visible when restoring from maximized, and it seems so: https://codesandbox.io/s/dockview-flexbox-spread-mk0dm9?file=/src/App.tsx

I am a bit confused as to why this worked, though. I believe normal functionality of overflow: hidden would be not to show any scroll bars but to allow the content to extend past the edges of the screen. In this case, overflow: hidden directed the dockview to resize to its available size... I wonder, do you think this is a bug, albeit a bit different than the original bug report? Definitely not nearly as important anymore since there is a workaround :)

Thank you very much again for the prompt response! I really appreciate your hard work in helping me to use this library effectively. I enjoy it!!