diff --git a/components/splitter/Panel.tsx b/components/splitter/Panel.tsx
index adec5e6cd3..86f4c697f3 100644
--- a/components/splitter/Panel.tsx
+++ b/components/splitter/Panel.tsx
@@ -11,13 +11,24 @@ export const InternalPanel = forwardRef<
   const panelClassName = classNames(
     `${prefixCls}-panel`,
     {
-      [`${prefixCls}-panel-hidden`]: !size,
+      [`${prefixCls}-panel-hidden`]: size === 0,
     },
     className,
   );
 
+  const hasSize = size !== undefined;
+
   return (
-    <div ref={ref} className={panelClassName} style={{ ...style, flexBasis: size }}>
+    <div
+      ref={ref}
+      className={panelClassName}
+      style={{
+        ...style,
+        // Use auto when start from ssr
+        flexBasis: hasSize ? size : 'auto',
+        flexGrow: hasSize ? 0 : 1,
+      }}
+    >
       {children}
     </div>
   );
diff --git a/components/splitter/SplitBar.tsx b/components/splitter/SplitBar.tsx
index 0884668013..c4bc289e29 100644
--- a/components/splitter/SplitBar.tsx
+++ b/components/splitter/SplitBar.tsx
@@ -22,6 +22,10 @@ export interface SplitBarProps {
   ariaMax: number;
 }
 
+function getValidNumber(num: number | undefined): number {
+  return typeof num === 'number' && !Number.isNaN(num) ? Math.round(num) : 0;
+}
+
 const SplitBar: React.FC<SplitBarProps> = (props) => {
   const {
     prefixCls,
@@ -112,9 +116,9 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     <div
       className={splitBarPrefixCls}
       role="separator"
-      aria-valuenow={Math.round(ariaNow)}
-      aria-valuemin={Math.round(ariaMin)}
-      aria-valuemax={Math.round(ariaMax)}
+      aria-valuenow={getValidNumber(ariaNow)}
+      aria-valuemin={getValidNumber(ariaMin)}
+      aria-valuemax={getValidNumber(ariaMax)}
     >
       <div
         className={classNames(`${splitBarPrefixCls}-dragger`, {
diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index c0ac425e31..25b0aca782 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -68,7 +68,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   }
 
   // ====================== Container =======================
-  const [containerSize, setContainerSize] = useState<number>(100);
+  const [containerSize, setContainerSize] = useState<number | undefined>();
 
   const onContainerResize: GetProp<typeof ResizeObserver, 'onResize'> = (size) => {
     const { offsetWidth, offsetHeight } = size;
@@ -82,10 +82,8 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   };
 
   // ========================= Size =========================
-  const [itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = useSizes(
-    items,
-    containerSize,
-  );
+  const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] =
+    useSizes(items, containerSize);
 
   // ====================== Resizable =======================
   const resizableInfos = useResizable(items, itemPxSizes);
@@ -157,7 +155,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
       <div style={mergedStyle} className={containerClassName}>
         {items.map((item, idx) => {
           // Panel
-          const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
+          const panel = <InternalPanel {...item} prefixCls={prefixCls} size={panelSizes[idx]} />;
 
           // Split Bar
           let splitBar: React.ReactElement | null = null;
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
index a3bfd50747..9ebbbd18c7 100644
--- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -25,67 +25,19 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="20"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </div>
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -106,7 +58,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -121,67 +73,19 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="20"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-      >
-        <span
-          aria-label="up"
-          class="anticon anticon-up ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="up"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-      >
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -211,7 +115,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: 50%; flex-grow: 0;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -226,7 +130,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
       </div>
     </div>
     <div
-      aria-valuemax="100"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -238,7 +142,7 @@ exports[`renders components/splitter/demo/control.tsx extend context correctly 1
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: 50%; flex-grow: 0;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -309,7 +213,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -324,7 +228,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="50"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -336,7 +240,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
     </div>
     <div
       class="ant-splitter-panel ant-splitter-panel-hidden"
-      style="flex-basis: 0px;"
+      style="flex-basis: 0px; flex-grow: 0;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -351,9 +255,9 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
-      aria-valuenow="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-splitter-bar"
       role="separator"
     >
@@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -389,7 +293,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -404,7 +308,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="50"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -416,7 +320,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
     </div>
     <div
       class="ant-splitter-panel ant-splitter-panel-hidden"
-      style="flex-basis: 0px;"
+      style="flex-basis: 0px; flex-grow: 0;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -431,9 +335,9 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
-      aria-valuenow="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-splitter-bar"
       role="separator"
     >
@@ -443,7 +347,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -469,7 +373,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -484,19 +388,19 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -522,7 +426,7 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -537,19 +441,19 @@ exports[`renders components/splitter/demo/debug.tsx extend context correctly 1`]
       </div>
     </div>
     <div
-      aria-valuemax="80"
-      aria-valuemin="30"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis: 50px;"
+      style="flex-basis: auto; flex-grow: 1;"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -576,7 +480,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 50px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -591,7 +495,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    aria-valuemax="100"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="50"
     class="ant-splitter-bar"
@@ -600,41 +504,17 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
     <div
       class="ant-splitter-bar-dragger"
     />
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </div>
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 50px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-splitter ant-splitter-vertical"
     >
       <div
         class="ant-splitter-panel"
-        style="flex-basis: 50px;"
+        style="flex-basis: auto; flex-grow: 1;"
       >
         <div
           class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -649,7 +529,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
         </div>
       </div>
       <div
-        aria-valuemax="100"
+        aria-valuemax="0"
         aria-valuemin="0"
         aria-valuenow="50"
         class="ant-splitter-bar"
@@ -661,7 +541,7 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
       </div>
       <div
         class="ant-splitter-panel"
-        style="flex-basis: 50px;"
+        style="flex-basis: auto; flex-grow: 1;"
       >
         <div
           class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -689,7 +569,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 33.33333333333333px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -704,7 +584,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
     </div>
   </div>
   <div
-    aria-valuemax="67"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="33"
     class="ant-splitter-bar"
@@ -713,58 +593,10 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
     <div
       class="ant-splitter-bar-dragger"
     />
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </div>
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-    >
-      <span
-        aria-label="right"
-        class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-          />
-        </svg>
-      </span>
-    </div>
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 33.33333333333333px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -779,8 +611,8 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
     </div>
   </div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="33"
+    aria-valuemax="0"
+    aria-valuemin="0"
     aria-valuenow="67"
     class="ant-splitter-bar"
     role="separator"
@@ -791,7 +623,7 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 33.33333333333333px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -943,7 +775,7 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 40px;"
+    style="flex-basis: 40%; flex-grow: 0;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -958,19 +790,19 @@ exports[`renders components/splitter/demo/size.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    aria-valuemax="70"
-    aria-valuemin="20"
+    aria-valuemax="0"
+    aria-valuemin="0"
     aria-valuenow="40"
     class="ant-splitter-bar"
     role="separator"
   >
     <div
-      class="ant-splitter-bar-dragger"
+      class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
     />
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 60px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -996,7 +828,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 50px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -1011,7 +843,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
     </div>
   </div>
   <div
-    aria-valuemax="100"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="50"
     class="ant-splitter-bar"
@@ -1023,7 +855,7 @@ exports[`renders components/splitter/demo/vertical.tsx extend context correctly
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis: 50px;"
+    style="flex-basis: auto; flex-grow: 1;"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
index 303fc44256..9616b87496 100644
--- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
@@ -10,7 +10,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -25,67 +25,19 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="20"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </div>
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -106,7 +58,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -121,67 +73,19 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="20"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-      >
-        <span
-          aria-label="up"
-          class="anticon anticon-up ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="up"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-      >
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -209,7 +113,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:50%;flex-grow:0"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -224,7 +128,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -236,7 +140,7 @@ exports[`renders components/splitter/demo/control.tsx correctly 1`] = `
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:50%;flex-grow:0"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -305,7 +209,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -322,7 +226,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="50"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -334,7 +238,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
     </div>
     <div
       class="ant-splitter-panel ant-splitter-panel-hidden"
-      style="flex-basis:0"
+      style="flex-basis:0;flex-grow:0"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -351,9 +255,9 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
-      aria-valuenow="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-splitter-bar"
       role="separator"
     >
@@ -363,7 +267,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -391,7 +295,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -408,7 +312,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="50"
+      aria-valuemax="0"
       aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
@@ -420,7 +324,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
     </div>
     <div
       class="ant-splitter-panel ant-splitter-panel-hidden"
-      style="flex-basis:0"
+      style="flex-basis:0;flex-grow:0"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -437,9 +341,9 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
-      aria-valuenow="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="ant-splitter-bar"
       role="separator"
     >
@@ -449,7 +353,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -477,7 +381,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -494,19 +398,19 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="100"
-      aria-valuemin="50"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -534,7 +438,7 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
   >
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -551,19 +455,19 @@ exports[`renders components/splitter/demo/debug.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      aria-valuemax="80"
-      aria-valuemin="30"
+      aria-valuemax="0"
+      aria-valuemin="0"
       aria-valuenow="50"
       class="ant-splitter-bar"
       role="separator"
     >
       <div
-        class="ant-splitter-bar-dragger"
+        class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
       />
     </div>
     <div
       class="ant-splitter-panel"
-      style="flex-basis:50px"
+      style="flex-basis:auto;flex-grow:1"
     >
       <div
         class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -590,7 +494,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis:50px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -605,7 +509,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    aria-valuemax="100"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="50"
     class="ant-splitter-bar"
@@ -614,41 +518,17 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
     <div
       class="ant-splitter-bar-dragger"
     />
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </div>
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis:50px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-splitter ant-splitter-vertical"
     >
       <div
         class="ant-splitter-panel"
-        style="flex-basis:50px"
+        style="flex-basis:auto;flex-grow:1"
       >
         <div
           class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -663,7 +543,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
         </div>
       </div>
       <div
-        aria-valuemax="100"
+        aria-valuemax="0"
         aria-valuemin="0"
         aria-valuenow="50"
         class="ant-splitter-bar"
@@ -675,7 +555,7 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
       </div>
       <div
         class="ant-splitter-panel"
-        style="flex-basis:50px"
+        style="flex-basis:auto;flex-grow:1"
       >
         <div
           class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -701,7 +581,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis:33.33333333333333px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -718,7 +598,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    aria-valuemax="67"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="33"
     class="ant-splitter-bar"
@@ -727,58 +607,10 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
     <div
       class="ant-splitter-bar-dragger"
     />
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-start"
-    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-start"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </div>
-    <div
-      class="ant-splitter-bar-collapse-bar ant-splitter-bar-collapse-bar-end"
-    >
-      <span
-        aria-label="right"
-        class="anticon anticon-right ant-splitter-bar-collapse-icon ant-splitter-bar-collapse-end"
-        role="img"
-        tabindex="-1"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-          />
-        </svg>
-      </span>
-    </div>
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis:33.33333333333333px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -795,8 +627,8 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="33"
+    aria-valuemax="0"
+    aria-valuemin="0"
     aria-valuenow="67"
     class="ant-splitter-bar"
     role="separator"
@@ -807,7 +639,7 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis:33.33333333333333px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -934,7 +766,7 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis:40px"
+    style="flex-basis:40%;flex-grow:0"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -949,19 +781,19 @@ exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    aria-valuemax="70"
-    aria-valuemin="20"
+    aria-valuemax="0"
+    aria-valuemin="0"
     aria-valuenow="40"
     class="ant-splitter-bar"
     role="separator"
   >
     <div
-      class="ant-splitter-bar-dragger"
+      class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
     />
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis:60px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -985,7 +817,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
 >
   <div
     class="ant-splitter-panel"
-    style="flex-basis:50px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
@@ -1000,7 +832,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    aria-valuemax="100"
+    aria-valuemax="0"
     aria-valuemin="0"
     aria-valuenow="50"
     class="ant-splitter-bar"
@@ -1012,7 +844,7 @@ exports[`renders components/splitter/demo/vertical.tsx correctly 1`] = `
   </div>
   <div
     class="ant-splitter-panel"
-    style="flex-basis:50px"
+    style="flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-flex ant-flex-align-center ant-flex-justify-center"
diff --git a/components/splitter/__tests__/index.test.tsx b/components/splitter/__tests__/index.test.tsx
index 0a0c18b1f6..37dd98e50d 100644
--- a/components/splitter/__tests__/index.test.tsx
+++ b/components/splitter/__tests__/index.test.tsx
@@ -15,6 +15,11 @@ import {
 
 type PanelProps = GetProps<typeof Splitter.Panel>;
 
+const resizeSplitter = async () => {
+  triggerResize(document.body.querySelector('.ant-splitter')!);
+  await waitFakeTimer();
+};
+
 const SplitterDemo = ({ items = [{}, {}], ...props }: { items?: PanelProps[] } & SplitterProps) => (
   <Splitter {...props}>
     {items?.map((item, idx) => {
@@ -61,6 +66,8 @@ describe('Splitter', () => {
   it('should correct render panel size', async () => {
     const { container } = render(<SplitterDemo items={[{ size: 20 }, { size: '45%' }, {}]} />);
 
+    await resizeSplitter();
+
     const panels = container.querySelectorAll('.ant-splitter-panel');
 
     expect(panels?.[0]).toHaveStyle('flex-basis: 20px');
@@ -142,6 +149,8 @@ describe('Splitter', () => {
         <SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
       );
 
+      await resizeSplitter();
+
       // Right
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
@@ -161,6 +170,8 @@ describe('Splitter', () => {
         <SplitterDemo items={[{}, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
       );
 
+      await resizeSplitter();
+
       // Right
       mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
@@ -172,7 +183,7 @@ describe('Splitter', () => {
       expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
     });
 
-    it('with min', () => {
+    it('with min', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -180,12 +191,14 @@ describe('Splitter', () => {
         <SplitterDemo items={[{ min: 10 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
       expect(onResize).toHaveBeenCalledWith([10, 90]);
       expect(onResizeEnd).toHaveBeenCalledWith([10, 90]);
     });
 
-    it('with max', () => {
+    it('with max', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -193,12 +206,14 @@ describe('Splitter', () => {
         <SplitterDemo items={[{ max: 90 }, {}]} onResize={onResize} onResizeEnd={onResizeEnd} />,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 100);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
       expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
     });
 
-    it('both panel has min and max', () => {
+    it('both panel has min and max', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -213,6 +228,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -100);
       expect(onResize).toHaveBeenCalledWith([20, 80]);
       expect(onResizeEnd).toHaveBeenCalledWith([20, 80]);
@@ -222,7 +239,7 @@ describe('Splitter', () => {
       expect(onResizeEnd).toHaveBeenCalledWith([80, 20]);
     });
 
-    it('rtl', () => {
+    it('rtl', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -232,12 +249,14 @@ describe('Splitter', () => {
         </ConfigProvider>,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -40);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
       expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
     });
 
-    it('[true, 0, true] can be move left', () => {
+    it('[true, 0, true] can be move left', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -249,12 +268,14 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
       expect(onResize).toHaveBeenCalledWith([0, 50, 50]);
       expect(onResizeEnd).toHaveBeenCalledWith([0, 50, 50]);
     });
 
-    it('[false, 0, true] can not be move left', () => {
+    it('[false, 0, true] can not be move left', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -266,6 +287,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
       expect(onResize).toHaveBeenCalledWith([50, 0, 50]);
       expect(onResizeEnd).toHaveBeenCalledWith([50, 0, 50]);
@@ -277,6 +300,9 @@ describe('Splitter', () => {
         return <SplitterDemo items={[{}, {}, {}]} />;
       };
       const { container } = render(<App />);
+
+      await resizeSplitter();
+
       mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
       triggerResize(container.querySelector('.ant-splitter')!);
       await act(async () => {
@@ -295,11 +321,13 @@ describe('Splitter', () => {
 
   // ============================= Collapsible =============================
   describe('collapsible', () => {
-    it('Basic', () => {
+    it('Basic', async () => {
       const { container, rerender } = render(
         <SplitterDemo items={[{ size: 20, collapsible: true }, { collapsible: true }]} />,
       );
 
+      await resizeSplitter();
+
       expect(container.querySelectorAll('.ant-splitter-bar-collapse-icon')).toHaveLength(2);
       expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy();
       expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy();
@@ -324,7 +352,7 @@ describe('Splitter', () => {
       expect(container.querySelectorAll('.ant-splitter-bar-collapse-end')).toHaveLength(1);
     });
 
-    it('collapsible - true', () => {
+    it('collapsible - true', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -342,12 +370,14 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
       expect(onResize).toHaveBeenCalledWith([0, 100]);
       expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
     });
 
-    it('collapsible - start:true', () => {
+    it('collapsible - start:true', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -368,6 +398,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeFalsy();
       expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeTruthy();
 
@@ -376,7 +408,7 @@ describe('Splitter', () => {
       expect(onResizeEnd).toHaveBeenCalledWith([60, 0, 40]);
     });
 
-    it('collapsible - end:true', () => {
+    it('collapsible - end:true', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -397,6 +429,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       expect(container.querySelector('.ant-splitter-bar-collapse-start')).toBeTruthy();
       expect(container.querySelector('.ant-splitter-bar-collapse-end')).toBeFalsy();
 
@@ -405,7 +439,7 @@ describe('Splitter', () => {
       expect(onResizeEnd).toHaveBeenCalledWith([40, 0, 60]);
     });
 
-    it('both collapsible', () => {
+    it('both collapsible', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -424,6 +458,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       function expectClick(element: HTMLElement, size: number[]) {
         onResize.mockReset();
         onResizeEnd.mockReset();
@@ -439,7 +475,7 @@ describe('Splitter', () => {
       expectClick(container.querySelector('.ant-splitter-bar-collapse-start')!, [50, 50]);
     });
 
-    it('collapsible with min', () => {
+    it('collapsible with min', async () => {
       const onResize = jest.fn();
       const onResizeEnd = jest.fn();
 
@@ -461,6 +497,8 @@ describe('Splitter', () => {
         />,
       );
 
+      await resizeSplitter();
+
       // Collapse left
       fireEvent.click(container.querySelector('.ant-splitter-bar-collapse-start')!);
       expect(onResize).toHaveBeenCalledWith([0, 100]);
diff --git a/components/splitter/__tests__/ssr.test.tsx b/components/splitter/__tests__/ssr.test.tsx
new file mode 100644
index 0000000000..522b8ceb20
--- /dev/null
+++ b/components/splitter/__tests__/ssr.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import Splitter from '..';
+import { resetWarned } from '../../_util/warning';
+
+describe('Splitter.SSR', () => {
+  beforeEach(() => {
+    resetWarned();
+    document.body.innerHTML = '';
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('px value', () => {
+    const str = renderToString(
+      <Splitter>
+        <Splitter.Panel key="1" size={23} />
+        <Splitter.Panel key="2" />
+      </Splitter>,
+    );
+
+    const div = document.createElement('div');
+    div.innerHTML = str;
+    document.body.appendChild(div);
+
+    expect(div.querySelectorAll('.ant-splitter-panel')[0]).toHaveStyle({
+      flexBasis: '23px',
+      flexGrow: '0',
+    });
+    expect(div.querySelectorAll('.ant-splitter-panel')[1]).toHaveStyle({
+      flexBasis: 'auto',
+      flexGrow: '1',
+    });
+  });
+
+  it('ptg value', () => {
+    const str = renderToString(
+      <Splitter>
+        <Splitter.Panel key="1" size="33%" />
+        <Splitter.Panel key="2" />
+      </Splitter>,
+    );
+
+    const div = document.createElement('div');
+    div.innerHTML = str;
+    document.body.appendChild(div);
+
+    expect(div.querySelectorAll('.ant-splitter-panel')[0]).toHaveStyle({
+      flexBasis: '33%',
+      flexGrow: '0',
+    });
+    expect(div.querySelectorAll('.ant-splitter-panel')[1]).toHaveStyle({
+      flexBasis: 'auto',
+      flexGrow: '1',
+    });
+  });
+});
diff --git a/components/splitter/hooks/useResize.ts b/components/splitter/hooks/useResize.ts
index c2315f6658..5d33b5f539 100644
--- a/components/splitter/hooks/useResize.ts
+++ b/components/splitter/hooks/useResize.ts
@@ -4,16 +4,20 @@ import type { ItemType } from './useItems';
 import type { ResizableInfo } from './useResizable';
 import { getPtg } from './useSizes';
 
+/**
+ * Handle user drag resize logic.
+ */
 export default function useResize(
   items: ItemType[],
   resizableInfos: ResizableInfo[],
   percentSizes: number[],
-  containerSize: number,
+  containerSize: number | undefined,
   updateSizes: (sizes: number[]) => void,
 ) {
   const limitSizes = items.map((item) => [item.min, item.max]);
 
-  const ptg2px = (ptg: number) => ptg * containerSize;
+  const mergedContainerSize = containerSize || 0;
+  const ptg2px = (ptg: number) => ptg * mergedContainerSize;
 
   // ======================== Resize ========================
   function getLimitSize(str: string | number | undefined, defaultLimit: number) {
@@ -79,8 +83,8 @@ export default function useResize(
     // Get boundary
     const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
     const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
-    const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], containerSize);
-    const endMaxSize = getLimitSize(limitSizes[nextIndex][1], containerSize);
+    const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], mergedContainerSize);
+    const endMaxSize = getLimitSize(limitSizes[nextIndex][1], mergedContainerSize);
 
     let mergedOffset = offset;
 
@@ -129,9 +133,9 @@ export default function useResize(
       const totalSize = currentSize + targetSize;
 
       const currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
-      const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], containerSize);
+      const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], mergedContainerSize);
       const targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0);
-      const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], containerSize);
+      const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
 
       const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
       const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
diff --git a/components/splitter/hooks/useSizes.ts b/components/splitter/hooks/useSizes.ts
index 38b0dec1bc..3dab83ee96 100644
--- a/components/splitter/hooks/useSizes.ts
+++ b/components/splitter/hooks/useSizes.ts
@@ -14,12 +14,13 @@ function isPtg(itemSize: string | number | undefined): itemSize is string {
  * Save the size state.
  * Align the size into flex percentage base.
  */
-export default function useSizes(items: PanelProps[], containerSize: number) {
+export default function useSizes(items: PanelProps[], containerSize?: number) {
   const propSizes = items.map((item) => item.size);
 
   const itemsCount = items.length;
 
-  const ptg2px = (ptg: number) => ptg * containerSize;
+  const mergedContainerSize = containerSize || 0;
+  const ptg2px = (ptg: number) => ptg * mergedContainerSize;
 
   // We do not need care the size state match the `items` length in `useState`.
   // It will calculate later.
@@ -53,7 +54,7 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
       } else if (itemSize || itemSize === 0) {
         const num = Number(itemSize);
         if (!Number.isNaN(num)) {
-          ptgList[i] = num / containerSize;
+          ptgList[i] = num / mergedContainerSize;
         }
       } else {
         emptyCount += 1;
@@ -74,11 +75,11 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
     }
 
     return ptgList as number[];
-  }, [sizes, containerSize]);
+  }, [sizes, mergedContainerSize]);
 
   const postPxSizes = React.useMemo(
     () => postPercentSizes.map(ptg2px),
-    [postPercentSizes, containerSize],
+    [postPercentSizes, mergedContainerSize],
   );
 
   const postPercentMinSizes = React.useMemo(
@@ -87,9 +88,9 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
         if (isPtg(item.min)) {
           return getPtg(item.min);
         }
-        return (item.min || 0) / containerSize;
+        return (item.min || 0) / mergedContainerSize;
       }),
-    [items, containerSize],
+    [items, mergedContainerSize],
   );
 
   const postPercentMaxSizes = React.useMemo(
@@ -98,12 +99,19 @@ export default function useSizes(items: PanelProps[], containerSize: number) {
         if (isPtg(item.max)) {
           return getPtg(item.max);
         }
-        return (item.max || containerSize) / containerSize;
+        return (item.max || mergedContainerSize) / mergedContainerSize;
       }),
-    [items, containerSize],
+    [items, mergedContainerSize],
+  );
+
+  // If ssr, we will use the size from developer config first.
+  const panelSizes = React.useMemo(
+    () => (containerSize ? postPxSizes : sizes),
+    [postPxSizes, containerSize],
   );
 
   return [
+    panelSizes,
     postPxSizes,
     postPercentSizes,
     postPercentMinSizes,