diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx
index bd5fba05ca..59168e7af9 100644
--- a/app/client/src/components/editorComponents/ResizableComponent.tsx
+++ b/app/client/src/components/editorComponents/ResizableComponent.tsx
@@ -3,7 +3,11 @@ import { batchUpdateMultipleWidgetProperties } from "actions/controlActions";
 import { focusWidget } from "actions/widgetActions";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
 import type { OccupiedSpace } from "constants/CanvasEditorConstants";
-import { DefaultDimensionMap, GridDefaults } from "constants/WidgetConstants";
+import {
+  DefaultDimensionMap,
+  GridDefaults,
+  WidgetHeightLimits,
+} from "constants/WidgetConstants";
 import { get, omit } from "lodash";
 import type { XYCord } from "pages/common/CanvasArenas/hooks/useRenderBlocksOnCanvas";
 import React, { memo, useContext, useMemo } from "react";
@@ -71,7 +75,6 @@ export const ResizableComponent = memo(function ResizableComponent(
   const { updateWidget } = useContext(EditorContext);
   const dispatch = useDispatch();
   const isAutoLayout = useSelector(getIsAutoLayout);
-
   const Resizable = isAutoLayout ? AutoLayoutResizable : FixedLayoutResizable;
   const isSnipingMode = useSelector(snipingModeSelector);
   const isPreviewMode = useSelector(previewModeSelector);
@@ -355,10 +358,21 @@ export const ResizableComponent = memo(function ResizableComponent(
     return !isAutoHeightEnabledForWidget(props) && isEnabled;
   }, [props, isAutoHeightEnabledForWidget, isEnabled]);
 
-  const fixedHeight =
-    isAutoHeightEnabledForWidgetWithLimits(props) ||
-    !isAutoHeightEnabledForWidget(props) ||
-    !props.isCanvas;
+  // What is the max resizable height for this widget, in pixels?
+  let maxHeightInPx =
+    WidgetHeightLimits.MAX_HEIGHT_IN_ROWS *
+    GridDefaults.DEFAULT_GRID_ROW_HEIGHT; // Maximum possible height
+  // If the widget has auto height with limits, we need to respect the set limits.
+  if (isAutoHeightEnabledForWidgetWithLimits(props)) {
+    maxHeightInPx =
+      (props.maxDynamicHeight || WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
+      GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
+  }
+
+  // Is auto height enabled for widget (without limits)
+  const autoHeight =
+    isAutoHeightEnabledForWidget(props) &&
+    !isAutoHeightEnabledForWidgetWithLimits(props);
 
   const allowResize: boolean =
     !isMultiSelected || (isAutoLayout && !props.isFlexChild);
@@ -370,22 +384,23 @@ export const ResizableComponent = memo(function ResizableComponent(
     !isAppSettingsPaneWithNavigationTabOpen &&
     !isDragging &&
     (isHovered || isSelected);
+
   return (
     <Resizable
       allowResize={allowResize}
+      autoHeight={autoHeight}
       componentHeight={dimensions.height}
       componentWidth={dimensions.width}
       direction={props.direction}
       enableHorizontalResize={isEnabled}
       enableVerticalResize={isVerticalResizeEnabled}
-      fixedHeight={fixedHeight}
       getResizedPositions={getResizedPositions}
       gridProps={gridProps}
       handles={handles}
       isFlexChild={props.isFlexChild}
       isHovered={isHovered}
       isMobile={props.isMobile || false}
-      maxDynamicHeight={props.maxDynamicHeight}
+      maxHeightInPx={maxHeightInPx}
       onStart={handleResizeStart}
       onStop={updateSize}
       originalPositions={originalPositions}
diff --git a/app/client/src/resizable/autolayoutresize/index.tsx b/app/client/src/resizable/autolayoutresize/index.tsx
index 6c26d4db3d..f28e52b3a5 100644
--- a/app/client/src/resizable/autolayoutresize/index.tsx
+++ b/app/client/src/resizable/autolayoutresize/index.tsx
@@ -4,11 +4,7 @@ import {
   isResizingDisabled,
 } from "components/editorComponents/ResizableUtils";
 import type { OccupiedSpace } from "constants/CanvasEditorConstants";
-import {
-  GridDefaults,
-  WIDGET_PADDING,
-  WidgetHeightLimits,
-} from "constants/WidgetConstants";
+import { GridDefaults, WIDGET_PADDING } from "constants/WidgetConstants";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -685,33 +681,22 @@ function AutoLayoutResizable(props: ResizableProps) {
       }}
       from={{
         width: props.componentWidth,
-        height: props.fixedHeight
-          ? Math.min(
-              (props.maxDynamicHeight ||
-                WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-                GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
-              props.componentHeight,
-            )
-          : "auto",
-        maxHeight:
-          (props.maxDynamicHeight || WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-          GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+        height: props.autoHeight
+          ? "auto"
+          : Math.min(props.maxHeightInPx, props.componentHeight),
+        maxHeight: props.maxHeightInPx,
       }}
       immediate={newDimensions.reset ? true : false}
       to={{
         width: widgetWidth,
-        height: props.fixedHeight
-          ? Math.min(
-              (props.maxDynamicHeight ||
-                WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-                GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
-              widgetHeight,
-            )
-          : "auto",
-
-        maxHeight:
-          (props.maxDynamicHeight || WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-          GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+        // If height is automatically set, use `auto`, widgetHeight is not considered
+        // other wise, limit the height based on the max.
+        // We could also use the isVerticalDisabled flag here, but that would mean that
+        // the auto height with limits will stop working correctly
+        height: props.autoHeight
+          ? "auto"
+          : Math.min(props.maxHeightInPx, widgetHeight),
+        maxHeight: props.maxHeightInPx,
         transform: `translate3d(${
           newDimensions.reflectPosition ? newDimensions.x : 0
         }px,${newDimensions.reflectPosition ? newDimensions.y : 0}px,0)`,
diff --git a/app/client/src/resizable/common.tsx b/app/client/src/resizable/common.tsx
index 607b3d2376..cf8b42d0f4 100644
--- a/app/client/src/resizable/common.tsx
+++ b/app/client/src/resizable/common.tsx
@@ -239,8 +239,8 @@ export type ResizableProps = {
     canResizeHorizontally: boolean;
     canResizeVertically: boolean;
   };
-  fixedHeight: boolean;
-  maxDynamicHeight?: number;
+  maxHeightInPx: number; // Maximum height in pixels, the child can have.
+  autoHeight: boolean; // true if we don't want a pixel height specified for the child
   originalPositions: OccupiedSpace;
   onStart: (affectsWidth?: boolean) => void;
   onStop: (
diff --git a/app/client/src/resizable/resizenreflow/index.tsx b/app/client/src/resizable/resizenreflow/index.tsx
index 642dc9fdac..ae68c1db7c 100644
--- a/app/client/src/resizable/resizenreflow/index.tsx
+++ b/app/client/src/resizable/resizenreflow/index.tsx
@@ -1,10 +1,6 @@
 import { computeRowCols } from "components/editorComponents/ResizableUtils";
 import { isHandleResizeAllowed } from "components/editorComponents/ResizableUtils";
-import {
-  GridDefaults,
-  WIDGET_PADDING,
-  WidgetHeightLimits,
-} from "constants/WidgetConstants";
+import { WIDGET_PADDING } from "constants/WidgetConstants";
 import { Spring } from "react-spring";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties } from "react";
@@ -400,6 +396,7 @@ export function ReflowResizable(props: ResizableProps) {
       props.showResizeBoundary ? "show-boundary" : ""
     } ${pointerEvents ? "" : "pointer-event-none"}`;
   }, [props.className, pointerEvents, props.showResizeBoundary]);
+
   return (
     <Spring
       config={{
@@ -409,33 +406,23 @@ export function ReflowResizable(props: ResizableProps) {
       }}
       from={{
         width: props.componentWidth,
-        height: props.fixedHeight
-          ? Math.min(
-              (props.maxDynamicHeight ||
-                WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-                GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
-              props.componentHeight,
-            )
-          : "auto",
-        maxHeight:
-          (props.maxDynamicHeight || WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-          GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+        height: props.autoHeight
+          ? "auto"
+          : Math.min(props.maxHeightInPx, props.componentHeight),
+        maxHeight: props.maxHeightInPx,
       }}
       immediate={newDimensions.reset ? true : false}
       to={{
         width: widgetWidth,
-        height: props.fixedHeight
-          ? Math.min(
-              (props.maxDynamicHeight ||
-                WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-                GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
-              widgetHeight,
-            )
-          : "auto",
+        // If height is automatically set, use `auto`, widgetHeight is not considered
+        // other wise, limit the height based on the max.
+        // We could also use the isVerticalDisabled flag here, but that would mean that
+        // the auto height with limits will stop working correctly
+        height: props.autoHeight
+          ? "auto"
+          : Math.min(props.maxHeightInPx, widgetHeight),
 
-        maxHeight:
-          (props.maxDynamicHeight || WidgetHeightLimits.MAX_HEIGHT_IN_ROWS) *
-          GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+        maxHeight: props.maxHeightInPx,
         transform: `translate3d(${
           (newDimensions.reflectPosition ? newDimensions.x : 0) -
           RESIZE_BORDER_BUFFER / 2