Min-size on any pane causing strange resizing

[chris-deep]

If I add min-size to any pane (even if I have no other sizing constraints specified on any pane e.g. size="" or max-size=""), resizing will cause other panes to shrink during a resize event.

Here's my setup:

SHOWS STRANGE RESIZE

If I use the code below, or any variation of it with any pane including a min-size value on any of my three panes, then when I resize shrink a pane and the mouse continues to travel in the direction of the resize shrink, the splitter component will cause the opposite pane (1 or 3) to start to shrink as well.

It's as if the component is continuing to track the mouse coordinates beyond the "min-size" point during a pane shrink drag event. And, I guess, it starts to use invalid (width or height) values to compute what the size of the panes should be...?

I added the push-other-panes set to false in the hopes it would not affect the other panes. But, it doesn't change the behavior.

Steps.

1. Display my project page, it has three panes, vertical divider, only the last pane has a min-size set.
2. Mouse grab and drag the splitter between pane 2 and 3.
3. Drag mouse to and past the min-size value (so in my case I'm dragging left to right and continue dragging right even after the pane has hit its min-size.
4. As I continue dragging/holding mouse down to the right, the min-size on pane 3 is honored but pane 1 starts to magically begin shrinking itself.
5. When I release the mouse, pane 1 now has a new width (smaller than I started the drag operation).

Expected

• Pane 1 should not change its size at all.
• Pane 3 should reduce its size on a drag operation in the shrink direction.
• Pane 3 should stop reducing its size once min-size value is hit.

<SplitterPanes :style="{ visibility: visible }"  
                    vertical 
                    :push-other-panes="false"
                    style="border: 0; height: calc(100% - 60px); width: calc(100% - 60px); left: 30px; top: 30px; position: fixed;"
                    :dbl-click-splitter="false">
            <Pane size="20">
                 <AppProjectTree ref="compProjectTree"></**AppProjectTree**>
            </Pane>
            <Pane  class="surface-50 " style="overflow-y:hidden; height:100%; ">
                  <AppProject3D ref="comp3D"></**AppProject3D>        
            </Pane>
            <Pane min-size="15" size="20">
                  <AppProjectEditor></**AppProjectEditor>
            </Pane>
        </SplitterPanes>

MY FALLBACK USAGE
This is my non-min-size fallback usage. I just eliminate min-size altogether so at least my UI is not buggy. But, it's not going to cut it for what I'm attempting to do in my app. I need a 3 pane (typical content editor layout with a content tree pane on left, content to edit in middle pane and a property editor in right pane) layout. And, pane 3 should honor a min-size and max-size value. I can't get it working correctly as noted above so unfortunately, I'm going to drop this component within next few days if no one has any idea what's going on. Hopefully, I'm using it wrong somehow...

<SplitterPanes :style="{ visibility: visible }"  
                   vertical 
                   :push-other-panes="false"
                   style="border: 0; height: calc(100% - 60px); width: calc(100% - 60px); left: 30px; top: 30px; position: fixed;"
                   :dbl-click-splitter="false">
           <Pane size="20">
              <AppProjectTree ref="compProjectTree"></AppProjectTree>
           </Pane>
           <Pane  class="surface-50 " style="overflow-y:hidden; height:100%; ">
              <AppProject3D ref="comp3D"></AppProject3D>        
           </Pane>
           <Pane size="20">
               <AppProjectEditor></AppProjectEditor>
           </Pane>
       </SplitterPanes>