From 5ebf353c8fd6e6aa8679faf5def67efcf905f728 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 11 Aug 2020 17:32:39 -0700
Subject: [PATCH] Fix datagrid not fitting into containers (#3894)

* Fix datagrid not fitting into containers

* cl
---
 CHANGELOG.md                                                  | 1 +
 src/components/datagrid/__snapshots__/data_grid.test.tsx.snap | 4 ++++
 src/components/datagrid/_data_grid.scss                       | 4 ++++
 src/components/datagrid/data_grid.tsx                         | 2 +-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26d9afff165..97d90b37f69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - Fixed `EuiFacetGroup` container expansion due to negative margin value ([#3871](https://github.com/elastic/eui/pull/3871))
 - Fixed `EuiComboBox` delimeter-separated option creation and empty state prompt text ([#3841](https://github.com/elastic/eui/pull/3841))
+- Fixed `EuiDataGrid` not properly resizing within a fixed height container ([#3894](https://github.com/elastic/eui/pull/3894))
 
 **Breaking changes**
 
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 054fefd80b1..b5cf6723327 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -177,6 +177,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -714,6 +715,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -1575,6 +1577,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -2111,6 +2114,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index ed996eb63e4..85ac6c4b475 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -113,3 +113,7 @@
   padding: $euiSizeS;
   margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
 }
+
+.euiDataGrid__focusWrap {
+  height: 100%;
+}
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index f10e4a5f8e5..d8a38df9b37 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -948,7 +948,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
                 <DataGridContext.Provider value={datagridContext}>
                   <EuiFocusTrap
                     disabled={!isFullScreen}
-                    style={{ height: '100%' }}>
+                    className="euiDataGrid__focusWrap">
                     <div
                       className={classes}
                       onKeyDown={handleGridKeyDown}