diff --git a/airflow/ui/dev/index.html b/airflow/ui/dev/index.html
index d8a8b371f3fe4..27842e5bd60aa 100644
--- a/airflow/ui/dev/index.html
+++ b/airflow/ui/dev/index.html
@@ -1,6 +1,6 @@
 <!-- Entry html file when the Vite dev server is running -->
 <!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%">
   <head>
     <meta charset="UTF-8" />
     <link
@@ -20,8 +20,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Airflow 3.0</title>
   </head>
-  <body>
-    <div id="root"></div>
+  <body style="height: 100%">
+    <div id="root" style="height: 100%"></div>
     <script type="module" src="http://localhost:5173/src/main.tsx"></script>
   </body>
 </html>
diff --git a/airflow/ui/index.html b/airflow/ui/index.html
index 28a29c6993e1b..f888d6fcc348e 100644
--- a/airflow/ui/index.html
+++ b/airflow/ui/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/pin_32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Airflow 3.0</title>
   </head>
-  <body>
-    <div id="root"></div>
+  <body style="height: 100%">
+    <div id="root" style="height: 100%"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/airflow/ui/src/components/DataTable/CardList.tsx b/airflow/ui/src/components/DataTable/CardList.tsx
index f6be5526817c0..f96b02904dab8 100644
--- a/airflow/ui/src/components/DataTable/CardList.tsx
+++ b/airflow/ui/src/components/DataTable/CardList.tsx
@@ -32,23 +32,23 @@ export const CardList = <TData,>({
   isLoading,
   table,
 }: DataTableProps<TData>) => (
-  <Box data-testid="card-list" overflow="auto" width="100%">
-    <SimpleGrid {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}>
-      {table.getRowModel().rows.map((row) => (
-        <Box key={row.id}>
-          {Boolean(isLoading) &&
-            (cardDef.meta?.customSkeleton ?? (
-              <Skeleton
-                data-testid="skeleton"
-                display="inline-block"
-                height={80}
-                width="100%"
-              />
-            ))}
-          {!Boolean(isLoading) &&
-            flexRender(cardDef.card, { row: row.original })}
-        </Box>
-      ))}
-    </SimpleGrid>
-  </Box>
+  <SimpleGrid
+    data-testid="card-list"
+    {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}
+  >
+    {table.getRowModel().rows.map((row) => (
+      <Box key={row.id}>
+        {Boolean(isLoading) &&
+          (cardDef.meta?.customSkeleton ?? (
+            <Skeleton
+              data-testid="skeleton"
+              display="inline-block"
+              height={80}
+              width="100%"
+            />
+          ))}
+        {!Boolean(isLoading) && flexRender(cardDef.card, { row: row.original })}
+      </Box>
+    ))}
+  </SimpleGrid>
 );
diff --git a/airflow/ui/src/components/DataTable/TableList.tsx b/airflow/ui/src/components/DataTable/TableList.tsx
index 3e7a3fffa820c..73e543155f233 100644
--- a/airflow/ui/src/components/DataTable/TableList.tsx
+++ b/airflow/ui/src/components/DataTable/TableList.tsx
@@ -40,12 +40,7 @@ export const TableList = <TData,>({
   renderSubComponent,
   table,
 }: DataTableProps<TData>) => (
-  <Table.Root
-    data-testid="table-list"
-    maxH="calc(100vh - 10rem)"
-    overflowY="auto"
-    striped
-  >
+  <Table.Root data-testid="table-list" striped>
     <Table.Header bg="chakra-body-bg" position="sticky" top={0} zIndex={1}>
       {table.getHeaderGroups().map((headerGroup) => (
         <Table.Row key={headerGroup.id}>
diff --git a/airflow/ui/src/layouts/BaseLayout.tsx b/airflow/ui/src/layouts/BaseLayout.tsx
index 848b4ea88f594..12e320a098c1f 100644
--- a/airflow/ui/src/layouts/BaseLayout.tsx
+++ b/airflow/ui/src/layouts/BaseLayout.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import type { PropsWithChildren } from "react";
 import { Outlet } from "react-router-dom";
 
@@ -25,8 +25,8 @@ import { Nav } from "./Nav";
 export const BaseLayout = ({ children }: PropsWithChildren) => (
   <>
     <Nav />
-    <Box ml={20} p={3}>
+    <Flex flexFlow="column" height="100%" ml={20} p={3}>
       {children ?? <Outlet />}
-    </Box>
+    </Flex>
   </>
 );
diff --git a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
index 90c186eeb3c2e..82b4320911f15 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
@@ -68,7 +68,7 @@ export const Dag = () => {
 
   return (
     <>
-      <Box bg="bg" position="sticky" top={0} zIndex={1}>
+      <Box>
         <Button asChild colorPalette="blue" variant="ghost">
           <RouterLink to="/dags">
             <FiChevronsLeft />
@@ -96,7 +96,9 @@ export const Dag = () => {
           </Tabs.List>
         </Tabs.Root>
       </Box>
-      <Outlet />
+      <Box overflow="auto">
+        <Outlet />
+      </Box>
     </>
   );
 };
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index c787b6874dd61..ae8eaea479fdb 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -24,6 +24,7 @@ import {
   Link,
   createListCollection,
   type SelectValueChangeDetails,
+  Box,
 } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { type ChangeEvent, useCallback, useState } from "react";
@@ -252,20 +253,22 @@ export const DagsList = () => {
         </HStack>
       </VStack>
       <ToggleTableDisplay display={display} setDisplay={setDisplay} />
-      <DataTable
-        cardDef={cardDef}
-        columns={columns}
-        data={data.dags}
-        displayMode={display}
-        errorMessage={<ErrorAlert error={error} />}
-        initialState={tableURLState}
-        isFetching={isFetching}
-        isLoading={isLoading}
-        modelName="Dag"
-        onStateChange={setTableURLState}
-        skeletonCount={display === "card" ? 5 : undefined}
-        total={data.total_entries}
-      />
+      <Box overflow="auto">
+        <DataTable
+          cardDef={cardDef}
+          columns={columns}
+          data={data.dags}
+          displayMode={display}
+          errorMessage={<ErrorAlert error={error} />}
+          initialState={tableURLState}
+          isFetching={isFetching}
+          isLoading={isLoading}
+          modelName="Dag"
+          onStateChange={setTableURLState}
+          skeletonCount={display === "card" ? 5 : undefined}
+          total={data.total_entries}
+        />
+      </Box>
     </>
   );
 };