diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
index f298d80d737d..ade354baeab4 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.js
+++ b/docs/data/tree-view/getting-started/FirstComponent.js
@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx
index f298d80d737d..ade354baeab4 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.tsx
+++ b/docs/data/tree-view/getting-started/FirstComponent.tsx
@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
index 80d9ff4dc140..b31f963565f8 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
+++ b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
@@ -1,6 +1,6 @@
 <SimpleTreeView
   aria-label="file system navigator"
-  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+  sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
 >
   <TreeItem nodeId="1" label="Applications">
     <TreeItem nodeId="2" label="Calendar" />
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/overview/BasicRichTreeView.js
index 3af5afeaf5c7..6891094201b0 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.js
+++ b/docs/data/tree-view/overview/BasicRichTreeView.js
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/overview/BasicRichTreeView.tsx
index 644205c6ffdc..5f89f65503c3 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.tsx
+++ b/docs/data/tree-view/overview/BasicRichTreeView.tsx
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js
index ae254b6877f5..e45b830807df 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.js
+++ b/docs/data/tree-view/overview/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
index ae254b6877f5..e45b830807df 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
index 063312287ef5..a85a4005de93 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
@@ -67,7 +67,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
index cdd69e36b2ff..3ab5ceda3eee 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
@@ -71,7 +71,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
index 70f0f60d7ef5..23c1b30b2f8d 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
@@ -3,7 +3,7 @@
     {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     expandedNodes={expandedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js
index 7f45db3398c0..5712834a0ada 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js
@@ -52,7 +52,7 @@ export default function TrackNodeExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx
index 3c1091875569..d0bfded863e4 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx
@@ -58,7 +58,7 @@ export default function TrackNodeExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
         </Typography>
       )}
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
index 535a5e1f2bbe..d4aa558e09aa 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
@@ -5,7 +5,7 @@
     Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
   </Typography>
 )}
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeExpansionToggle={handleNodeExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
index 3af5afeaf5c7..1758169287e6 100644
--- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
index 644205c6ffdc..12357940fd8b 100644
--- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
index 92ba89af8ef8..01d3c61bd5f5 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
@@ -66,7 +66,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
index 5127f67241f0..47525b38aedd 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
@@ -72,7 +72,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
index 6477e0c302e0..07994b675ecb 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
@@ -46,7 +46,7 @@ const isItemDisabled = (item) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
index f1ab2b1335e3..5d5b0a2a9c62 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
@@ -52,7 +52,7 @@ const isItemDisabled = (item: MuiXProduct) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.js b/docs/data/tree-view/rich-tree-view/items/GetItemId.js
index c1db4c61e4b7..72a50eaeb7e6 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemId.js
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.js
@@ -27,7 +27,7 @@ const getItemId = (item) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
index 105405ea2ac2..deca6e972944 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
@@ -32,7 +32,7 @@ const getItemId = (item: MuiXProduct) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
index 1a6511a06a70..830a78258204 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
@@ -27,7 +27,7 @@ const getItemLabel = (item) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
index de5f01ef25bb..0d6815d0d677 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
@@ -32,7 +32,7 @@ const getItemLabel = (item: MuiXProduct) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
index a8d9d0d100b2..392ad5ede863 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
@@ -65,7 +65,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
index d8de02d814df..a51fddb2f7b9 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
@@ -66,7 +66,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
index edaf87ee644d..05dbf38354c7 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
@@ -3,7 +3,7 @@
     {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     selectedNodes={selectedNodes}
diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
index c403c5c78ca3..0f9b7cec775a 100644
--- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
index 78f8b569e6b6..1d5186c76542 100644
--- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
index 7d74d64e6879..a873643c428d 100644
--- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
index 72ba5375d5bd..e66daa1db645 100644
--- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js
index 891709293c47..fdf2cb447ca6 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js
@@ -51,7 +51,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx
index 7f151f72afcc..dc49b176b84a 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx
@@ -57,7 +57,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview
index 78685ef7036b..a7ad6e6419ce 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview
@@ -3,7 +3,7 @@
     ? 'No node selection recorded'
     : `Last selected node: ${lastSelectedNode}`}
 </Typography>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeSelectionToggle={handleNodeSelectionToggle}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
index b9a5851e126d..f80d1f35a548 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
+++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
@@ -38,7 +38,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           expandedNodes={expandedNodes}
           onExpandedNodesChange={handleExpandedNodesChange}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
index e7493025fa3b..369e4a0439f2 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
+++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
@@ -41,7 +41,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           expandedNodes={expandedNodes}
           onExpandedNodesChange={handleExpandedNodesChange}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js
index 5836d5a55c00..255c0efbb54b 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js
+++ b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js
@@ -22,7 +22,7 @@ export default function TrackNodeExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView onNodeExpansionToggle={handleNodeExpansionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx
index 5c6d8485d40c..3cdf96e2b5fc 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx
+++ b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx
@@ -28,7 +28,7 @@ export default function TrackNodeExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
         </Typography>
       )}
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView onNodeExpansionToggle={handleNodeExpansionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
index ae254b6877f5..e45b830807df 100644
--- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
index ae254b6877f5..e45b830807df 100644
--- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
index 8c35d4ebaadf..9277addefe8d 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
@@ -25,7 +25,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
index 1434931f4086..f70a8450a3c1 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
@@ -25,7 +25,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
index 935118837b17..9a9e18844b02 100644
--- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
@@ -38,7 +38,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           selectedNodes={selectedNodes}
           onSelectedNodesChange={handleSelectedNodesChange}
diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
index 26516e7546c4..3f5fe3e4619f 100644
--- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
@@ -38,7 +38,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           selectedNodes={selectedNodes}
           onSelectedNodesChange={handleSelectedNodesChange}
diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
index 6f461015bc97..c5888258fb7b 100644
--- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView disableSelection>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
index 6f461015bc97..c5888258fb7b 100644
--- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView disableSelection>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
index 1ac08c85b55f..d960923d3502 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView multiSelect>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
index 1ac08c85b55f..d960923d3502 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView multiSelect>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
index 7e77949a5248..4fd35b6b0b25 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
@@ -21,7 +21,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <SimpleTreeView onNodeSelectionToggle={handleNodeSelectionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
index db772b2839cc..f978231c95ad 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
@@ -27,7 +27,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <SimpleTreeView onNodeSelectionToggle={handleNodeSelectionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />