diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent.blue.light).png
index 2501aa486c75..c9bd3743a923 100644
Binary files a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/resize.ts b/e2e/testcafe-devextreme/tests/navigation/splitter/resize.ts
index 7a43afce5754..815ad3d42da2 100644
--- a/e2e/testcafe-devextreme/tests/navigation/splitter/resize.ts
+++ b/e2e/testcafe-devextreme/tests/navigation/splitter/resize.ts
@@ -16,7 +16,7 @@ test.meta({ browserSize: [800, 800] })('non resizable pane should not change its
 
   await t
     .expect(splitter.getItem(2).element.clientWidth)
-    .eql(145);
+    .eql(300);
 }).before(async () => createWidget('dxSplitter', {
   width: '100%',
   height: 300,
diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter.ts b/packages/devextreme/js/__internal/ui/splitter/splitter.ts
index 2ca1c018760d..108e440ef6d2 100644
--- a/packages/devextreme/js/__internal/ui/splitter/splitter.ts
+++ b/packages/devextreme/js/__internal/ui/splitter/splitter.ts
@@ -1100,9 +1100,10 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
   }
 
   _dimensionChanged(): void {
-    this._updateItemSizes();
-
     this._layout = this._getDefaultLayoutBasedOnSize();
+    this._applyStylesFromLayout(this._layout);
+
+    this._updateItemSizes();
   }
 
   _optionChanged(args: OptionChanged<Properties>): void {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js
index 752166f71b94..1dda0867b6b2 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js
@@ -1973,8 +1973,8 @@ QUnit.module('Resizing', moduleConfig, () => {
 
             this.instance.option(orientation === 'horizontal' ? 'width' : 'height', 700);
 
-            this.checkItemSizes([159.133, 159.133, 159.133, 204.602]);
-            this.assertLayout([23.3333, 23.3333, 23.3333, 30]);
+            this.checkItemSizes([0, 166.664, 215.336, 300]);
+            this.assertLayout([0, 24.4375, 31.5742, 43.9883]);
         });
     });
 
@@ -2822,6 +2822,75 @@ QUnit.module('Resizing', moduleConfig, () => {
 
         this.assertLayout(['15', '10', '25', '50']);
     });
+
+    [{
+        initialWidth: 408,
+        newWidth: 808,
+        dataSource: [{ size: '200px', maxSize: '200px' }, { }],
+        expectedLayout: ['25', '75'],
+        expectedItemSizes: [200, 600],
+    }, {
+        initialWidth: 408,
+        newWidth: 808,
+        dataSource: [{ }, { size: '200px', maxSize: '200px' }],
+        expectedLayout: ['75', '25'],
+        expectedItemSizes: [600, 200],
+    }, {
+        initialWidth: 808,
+        newWidth: 408,
+        dataSource: [{ size: '200px', minSize: '200px' }, { }],
+        expectedLayout: ['50', '50'],
+        expectedItemSizes: [200, 200],
+    }, {
+        initialWidth: 808,
+        newWidth: 408,
+        dataSource: [{ }, { size: '200px', minSize: '200px' }],
+        expectedLayout: ['50', '50'],
+        expectedItemSizes: [200, 200],
+    }, {
+        initialWidth: 416,
+        newWidth: 816,
+        dataSource: [{ size: '200px', maxSize: '200px' }, { }, { }],
+        expectedLayout: ['25', '12.5', '62.5'],
+        expectedItemSizes: [200, 100, 500],
+    }, {
+        initialWidth: 816,
+        newWidth: 416,
+        dataSource: [{ size: '200px', minSize: '200px' }, { }, { }],
+        expectedLayout: ['50', '50', '0'],
+        expectedItemSizes: [200, 200, 0],
+    }, {
+        initialWidth: 416,
+        newWidth: 816,
+        dataSource: [{ }, { size: '200px', maxSize: '200px' }, { }],
+        expectedLayout: ['12.5', '25', '62.5'],
+        expectedItemSizes: [100, 200, 500],
+    }, {
+        initialWidth: 416,
+        newWidth: 816,
+        dataSource: [{ size: '200px', minSize: '100px', maxSize: '300px' }, { }],
+        expectedLayout: ['24.7525', '75.2475'],
+        expectedItemSizes: [200, 608],
+    }, {
+        initialWidth: 208,
+        newWidth: 808,
+        dataSource: [{ size: '100px', maxSize: '200px' }, { }],
+        expectedLayout: ['12.5', '87.5'],
+        expectedItemSizes: [100, 700],
+    }].forEach(({ initialWidth, newWidth, dataSource, expectedLayout, expectedItemSizes }) => {
+        QUnit.test(`pane constraints should be respected after dimension change from ${initialWidth} to ${newWidth}, dataSource: ${JSON.stringify(dataSource)}`, function(assert) {
+            this.reinit({
+                width: initialWidth,
+                height: 408,
+                dataSource,
+            });
+
+            this.instance.option('width', newWidth);
+
+            this.checkItemSizes(expectedItemSizes);
+            this.assertLayout(expectedLayout);
+        });
+    });
 });
 
 QUnit.module('Initialization', moduleConfig, () => {