From 09d6941c73d7d0b0e8fa43fa63e79e849e2cff0d Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Wed, 2 Jun 2021 17:00:12 +0300
Subject: [PATCH 1/2] Fix fluid column width when viewport size is not enough

---
 .../hooks/features/columns/useGridColumns.ts  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
index 9e6980b9a482d..8255905362342 100644
--- a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
@@ -32,6 +32,7 @@ import {
   visibleGridColumnsSelector,
 } from './gridColumnsSelector';
 import { useGridApiOptionHandler } from '../../root/useGridApiEventHandler';
+import { GRID_STRING_COL_DEF } from '../../../models/colDef/gridStringColDef';
 
 function updateColumnsWidth(columns: GridColumns, viewportWidth: number) {
   const numberOfFluidColumns = columns.filter((column) => !!column.flex && !column.hide).length;
@@ -50,14 +51,19 @@ function updateColumnsWidth(columns: GridColumns, viewportWidth: number) {
   }
 
   let newColumns = columns;
-  if (viewportWidth > 0 && numberOfFluidColumns) {
+  if (numberOfFluidColumns) {
     const flexMultiplier = viewportWidth / flexDivider;
-    newColumns = columns.map((column) => {
-      return {
-        ...column,
-        width: column.flex! ? Math.floor(flexMultiplier * column.flex!) : column.width,
-      };
-    });
+    newColumns = columns.map((column) =>
+      viewportWidth > 0
+        ? {
+            ...column,
+            width: column.flex! ? Math.floor(flexMultiplier * column.flex!) : column.width,
+          }
+        : {
+            ...column,
+            width: column.flex! ? GRID_STRING_COL_DEF.width : column.width,
+          },
+    );
   }
   return newColumns;
 }

From f36ec0380a8a8adf43f9c2d2d266fac9b3bc4883 Mon Sep 17 00:00:00 2001
From: Danail H <hadjiatanasov@gmail.com>
Date: Thu, 3 Jun 2021 16:33:55 +0300
Subject: [PATCH 2/2] Only clone the column if it is a flex column

---
 .../hooks/features/columns/useGridColumns.ts  | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
index 8255905362342..88fe369e1950e 100644
--- a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
@@ -53,17 +53,16 @@ function updateColumnsWidth(columns: GridColumns, viewportWidth: number) {
   let newColumns = columns;
   if (numberOfFluidColumns) {
     const flexMultiplier = viewportWidth / flexDivider;
-    newColumns = columns.map((column) =>
-      viewportWidth > 0
-        ? {
-            ...column,
-            width: column.flex! ? Math.floor(flexMultiplier * column.flex!) : column.width,
-          }
-        : {
-            ...column,
-            width: column.flex! ? GRID_STRING_COL_DEF.width : column.width,
-          },
-    );
+    newColumns = columns.map((column) => {
+      if (!column.flex) {
+        return column;
+      }
+      return {
+        ...column,
+        width:
+          viewportWidth > 0 ? Math.floor(flexMultiplier * column.flex!) : GRID_STRING_COL_DEF.width,
+      };
+    });
   }
   return newColumns;
 }