From 15309ec50be7191da4d412e9261d20cb4520cd29 Mon Sep 17 00:00:00 2001
From: Shelvin <ssingh@easypost.com>
Date: Thu, 7 Nov 2024 16:27:07 -0800
Subject: [PATCH] fix: overflow for NexusLayoutMultipageContent (#1459)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📝 Changes

before:

![Screenshot 2024-11-07 at 2 16
28 PM](https://github.com/user-attachments/assets/b9e0e751-6722-478e-975d-69f51e278921)

after:

![Screenshot 2024-11-07 at 2 17
08 PM](https://github.com/user-attachments/assets/16840959-c486-41a2-aae8-3be58ed772ef)



## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [x] Visuals match Design Specs in Figma
- [x] Stories accompany any component changes
- [x] Code is in accordance with our style guide
- [ ] ~Design tokens are utilized~
- [ ] ~Unit tests accompany any component changes~
- [ ] ~TSDoc is written for any API surface area~
- [ ] ~Specs are up-to-date~
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.
---
 .changeset/short-hats-mate.md                          |  5 +++++
 easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx  | 10 +++++++++-
 .../src/NexusLayout/NexusLayoutMultipage.module.scss   |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/short-hats-mate.md

diff --git a/.changeset/short-hats-mate.md b/.changeset/short-hats-mate.md
new file mode 100644
index 000000000..c07576e38
--- /dev/null
+++ b/.changeset/short-hats-mate.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+fix: overflow for NexusLayoutMultipageContent component
diff --git a/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx b/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
index 6ad0458a7..886cb6a3a 100644
--- a/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
+++ b/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
@@ -10,6 +10,7 @@ import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Button } from "../Button";
+import { Text } from "../Text";
 import { HorizontalStack } from "../HorizontalStack";
 import { Menu } from "../Menu";
 import { NexusLayout } from "./NexusLayout";
@@ -174,7 +175,14 @@ export const MultipageContent: Story = {
                 </Button>
               </HorizontalStack>
             </NexusLayout.MultipageHeader>
-            <div style={{ height: 400 }}></div>
+            <div style={{ height: 400 }}>
+              <Text variant="body2">
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque
+                obcaecati iusto neque architecto, quae dolore illo. Saepe ipsum
+                voluptates reprehenderit repellendus deleniti, molestias
+                placeat, consectetur et nihil quisquam, numquam pariatur!
+              </Text>
+            </div>
           </NexusLayout.MultipageContent>
         </NexusLayout.MultipageContainer>
       </NexusLayout.Content>
diff --git a/easy-ui-react/src/NexusLayout/NexusLayoutMultipage.module.scss b/easy-ui-react/src/NexusLayout/NexusLayoutMultipage.module.scss
index 920b1896e..e9c8a521f 100644
--- a/easy-ui-react/src/NexusLayout/NexusLayoutMultipage.module.scss
+++ b/easy-ui-react/src/NexusLayout/NexusLayoutMultipage.module.scss
@@ -15,6 +15,6 @@
 }
 
 .content {
-  flex: 1 0 auto;
+  flex: 1;
   padding: design-token("space.3") design-token("space.4");
 }