diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
index aa3e42ab3f30f..815b360b1b054 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -309,7 +309,11 @@ const Details = ({
       <Tabs
         size="lg"
         isLazy
-        height="100%"
+        display="flex"
+        flexDirection="column"
+        flex={1}
+        minH={0}
+        overflow="hidden"
         index={tabIndex}
         onChange={onChangeTab}
       >
@@ -425,8 +429,8 @@ const Details = ({
             </Button>
           )}
         </TabList>
-        <TabPanels height="100%">
-          <TabPanel height="100%">
+        <TabPanels flex={1} overflowY="auto">
+          <TabPanel>
             {isDag && <DagContent />}
             {isDagRun && <DagRunContent runId={runId} />}
             {!!runId && !!taskId && (
@@ -460,10 +464,10 @@ const Details = ({
               runId={runId}
             />
           </TabPanel>
-          <TabPanel height="100%">
+          <TabPanel>
             <DagCode />
           </TabPanel>
-          <TabPanel height="100%">
+          <TabPanel>
             <EventLog
               taskId={isGroup || !taskId ? undefined : taskId}
               showMapped={isMapped || !taskId}
@@ -471,12 +475,12 @@ const Details = ({
             />
           </TabPanel>
           {isDag && (
-            <TabPanel height="100%">
+            <TabPanel>
               <RunDuration />
             </TabPanel>
           )}
           {isDag && (
-            <TabPanel height="80%">
+            <TabPanel>
               <Flex justifyContent="right" pr="30px">
                 <Checkbox
                   isChecked={showBar}
@@ -491,15 +495,12 @@ const Details = ({
             </TabPanel>
           )}
           {isDag && (
-            <TabPanel height="100%" width="100%" overflow="auto">
+            <TabPanel p={0}>
               <Calendar />
             </TabPanel>
           )}
           {isTaskInstance && run && (
-            <TabPanel
-              pt={mapIndex !== undefined ? "0px" : undefined}
-              height="100%"
-            >
+            <TabPanel pt={mapIndex !== undefined ? "0px" : undefined}>
               <BackToTaskSummary
                 isMapIndexDefined={mapIndex !== undefined}
                 onClick={() => onSelect({ runId, taskId })}
@@ -520,7 +521,7 @@ const Details = ({
             </TabPanel>
           )}
           {isMappedTaskSummary && (
-            <TabPanel height="100%">
+            <TabPanel>
               <MappedInstances
                 dagId={dagId}
                 runId={runId}
@@ -532,7 +533,7 @@ const Details = ({
             </TabPanel>
           )}
           {isTaskInstance && (
-            <TabPanel height="100%">
+            <TabPanel>
               <XcomCollection
                 dagId={dagId}
                 dagRunId={runId}
@@ -543,7 +544,7 @@ const Details = ({
             </TabPanel>
           )}
           {isTaskInstance && isK8sExecutor && (
-            <TabPanel height="100%">
+            <TabPanel>
               <RenderedK8s />
             </TabPanel>
           )}