diff --git a/packages/ui-modal/src/Modal/index.tsx b/packages/ui-modal/src/Modal/index.tsx
index abc4d94c72..bf01dba3cd 100644
--- a/packages/ui-modal/src/Modal/index.tsx
+++ b/packages/ui-modal/src/Modal/index.tsx
@@ -176,7 +176,9 @@ class Modal extends Component<ModalProps, ModalState> {
     // this is needed to apply a media query breakpoint
     const wrappedHeaderAndBody =
       headerAndBody.length > 0 ? (
-        <div css={styles?.joinedHeaderAndBody}>{headerAndBody}</div>
+        <div key="header-and-body" css={styles?.joinedHeaderAndBody}>
+          {headerAndBody}
+        </div>
       ) : null
 
     return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others]
diff --git a/packages/ui-modal/src/Modal/styles.ts b/packages/ui-modal/src/Modal/styles.ts
index 4e6290d4a0..a41b5aef0d 100644
--- a/packages/ui-modal/src/Modal/styles.ts
+++ b/packages/ui-modal/src/Modal/styles.ts
@@ -114,7 +114,7 @@ const generateStyle = (
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',
-
+      flex: '1 1 auto',
       // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
       '@media (max-height: 20rem)': {
         overflowY: 'auto',