diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/index.tsx
index 0a5e2f3610541..5ee527d5ddf8a 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/index.tsx
@@ -64,12 +64,7 @@ export const AlertsSummaryChartsPanel: React.FC<Props> = ({
   );
 
   return (
-    <KpiPanel
-      $toggleStatus={isExpanded}
-      data-test-subj="alerts-charts-panel"
-      hasBorder
-      height={panelHeight}
-    >
+    <KpiPanel $toggleStatus={isExpanded} data-test-subj="alerts-charts-panel" hasBorder>
       <HeaderSection
         alignHeader={alignHeader}
         outerDirection="row"
@@ -82,12 +77,7 @@ export const AlertsSummaryChartsPanel: React.FC<Props> = ({
         toggleQuery={toggleQuery}
       />
       {isExpanded && (
-        <StyledFlexGroup
-          data-test-subj="alerts-charts-container"
-          className="eui-yScroll"
-          wrap
-          gutterSize="m"
-        >
+        <StyledFlexGroup data-test-subj="alerts-charts-container" wrap gutterSize="m">
           <StyledFlexItem>
             <SeverityLevelPanel
               filters={filters}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.test.tsx
index a8b2d16a64f1a..56ed8ea7f1cc5 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.test.tsx
@@ -166,17 +166,7 @@ describe('AlertsTreemapPanel', () => {
     );
   });
 
-  it('renders the panel with the expected class to style the overflow-y scroll bar', async () => {
-    render(
-      <TestProviders>
-        <AlertsTreemapPanel {...defaultProps} />
-      </TestProviders>
-    );
-
-    await waitFor(() => expect(screen.getByTestId('treemapPanel')).toHaveClass('eui-yScroll'));
-  });
-
-  it('renders the panel with an auto overflow-y to allow vertical scrolling when necessary when the panel is expanded', async () => {
+  it('renders the panel with a hidden overflow-y when the panel is expanded, delegating scrolling to the inner content', async () => {
     render(
       <TestProviders>
         <AlertsTreemapPanel {...defaultProps} />
@@ -184,7 +174,7 @@ describe('AlertsTreemapPanel', () => {
     );
 
     await waitFor(() =>
-      expect(screen.getByTestId('treemapPanel')).toHaveStyleRule('overflow-y', 'auto')
+      expect(screen.getByTestId('treemapPanel')).toHaveStyleRule('overflow-y', 'hidden')
     );
   });
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.tsx
index 043e931d79a9f..5ad6443567958 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_treemap_panel/index.tsx
@@ -8,6 +8,7 @@
 import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types';
 import type { EuiComboBox } from '@elastic/eui';
 import { EuiProgress } from '@elastic/eui';
+import styled from '@emotion/styled';
 import type { Filter, Query } from '@kbn/es-query';
 import { buildEsQuery } from '@kbn/es-query';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
@@ -29,6 +30,12 @@ import { useKibana } from '../../../../common/lib/kibana';
 
 const DEFAULT_HEIGHT = DEFAULT_MIN_CHART_HEIGHT + 134; // px
 
+const ScrollableContent = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+`;
+
 const COLLAPSED_HEIGHT = 64; // px
 
 const ALERTS_TREEMAP_ID = 'alerts-treemap';
@@ -162,11 +169,9 @@ const AlertsTreemapPanelComponent: React.FC<Props> = ({
   return (
     <InspectButtonContainer>
       <KpiPanel
-        className="eui-yScroll"
         data-test-subj="treemapPanel"
         hasBorder
         height={isPanelExpanded ? height : COLLAPSED_HEIGHT}
-        $overflowY={isPanelExpanded ? 'auto' : 'hidden'}
         $toggleStatus
       >
         <HeaderSection
@@ -203,13 +208,15 @@ const AlertsTreemapPanelComponent: React.FC<Props> = ({
         ) : (
           <>
             {alertsData != null && isPanelExpanded && (
-              <AlertsTreemap
-                addFilter={addFilter}
-                data={alertsData}
-                maxBuckets={DEFAULT_STACK_BY_FIELD0_SIZE}
-                stackByField0={stackByField0}
-                stackByField1={stackByField1}
-              />
+              <ScrollableContent>
+                <AlertsTreemap
+                  addFilter={addFilter}
+                  data={alertsData}
+                  maxBuckets={DEFAULT_STACK_BY_FIELD0_SIZE}
+                  stackByField0={stackByField0}
+                  stackByField1={stackByField1}
+                />
+              </ScrollableContent>
             )}
           </>
         )}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/index.tsx
index 80e7527e6df07..e8e9552e04aea 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/index.tsx
@@ -172,7 +172,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
   ]);
 
   return (
-    <div data-test-subj="chartPanels">
+    <div data-test-subj="chartPanels" css={{ 'max-height': CHART_PANEL_HEIGHT, overflow: 'auto' }}>
       {alertViewSelection === 'trend' && (
         <FullHeightFlexItem grow={2}>
           {isLoadingIndexPattern ? (
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx
index 3a0dccc492475..65bf387748fc9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx
@@ -10,7 +10,6 @@ import { EuiPanel, EuiComboBox } from '@elastic/eui';
 import styled from 'styled-components';
 import type { LegacyRef } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import { PANEL_HEIGHT, MOBILE_PANEL_HEIGHT } from './config';
 import { useStackByFields } from './hooks';
 import * as i18n from './translations';
 
@@ -37,18 +36,7 @@ export const KpiPanel = styled(EuiPanel)<{
   position: relative;
   overflow-x: hidden;
   overflow-y: ${({ $overflowY }) => $overflowY ?? 'hidden'};
-  @media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
-    ${({ height, $toggleStatus }) =>
-      $toggleStatus &&
-      `
-      height: ${height != null ? height : PANEL_HEIGHT}px;
-  `}
-  }
-  ${({ $toggleStatus }) =>
-    $toggleStatus &&
-    `
-    height: ${MOBILE_PANEL_HEIGHT}px;
-  `}
+  ${({ height }) => height != null && `height: ${height}px;`}
 `;
 interface StackedBySelectProps {
   'aria-label'?: string;