[MultiSplitter] Fix Multisplitter fixed width (#2218)

Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>

Author: dvoituron

src/Core/Components/Splitter/FluentMultiSplitter.razor.css

@@ -151,6 +151,8 @@
     overflow: hidden;
     position: relative;
     flex: 0 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
     .fluent-multi-splitter ::deep > .fluent-multi-splitter-pane[status="collapsed"] {

src/Core/Components/Splitter/FluentMultiSplitter.razor.js

@@ -73,7 +73,10 @@ export function startSplitterResize(
         paneLength: paneLength,
         paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0,
         mouseUpHandler: function (e) {
-            if (document.splitterData[el]) {
+            if (document.splitterData[el] &&
+                pane.style.flexBasis.includes('%') &&
+                paneNext.style.flexBasis.includes('%')) {
+
                 splitter.invokeMethodAsync(
                     'FluentMultiSplitter.OnPaneResizedAsync',
                     parseInt(pane.getAttribute('data-index')),

src/Core/Components/Splitter/FluentMultiSplitterPane.razor.cs

@@ -183,7 +183,6 @@ internal bool IsResizable
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("flex-basis", Size)
-        .AddStyle("min-width", Size, when: !Resizable && !string.IsNullOrEmpty(Size))
         .Build();
 
     /// <summary />

tests/Core/Splitter/FluentMultiSplitterTests.FluentMultiSplitter_Size_Fixed.verified.razor.html

@@ -2,5 +2,5 @@
 <div class="fluent-multi-splitter" orientation="horizontal" b-ug2ltnxcve="" blazor:elementreference="xxx">
   <div id="xxx" status="lastresizable" class="fluent-multi-splitter-pane" style="flex-basis: 100%;" data-index="0">Pane A</div>
   <div class="fluent-multi-splitter-bar" status="lastresizable" blazor:onmousedown="1" blazor:onclick:preventdefault="" blazor:onclick:stoppropagation=""></div>
-  <div id="xxx" status="locked" class="fluent-multi-splitter-pane" style="flex-basis: 300px; min-width: 300px;" data-index="1">Pane B</div>
-</div>
+  <div id="xxx" status="locked" class="fluent-multi-splitter-pane" style="flex-basis: 300px;" data-index="1">Pane B</div>
+</div>