css Overflow on the modal window in React JS - css

Question

I am using Radix UI to create a modal window:
<Dialog.Root>
<Dialog.Trigger asChild>
<button className="Button violet" size="large">
Edit profile
</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Content className="DialogContent" style={{ width: "unset" }}>
<Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>
<div
style={{ maxWidth: "300px", maxHeight: "150px", overflow: "auto" }}
>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
</div>
<div
style={{ display: "flex", marginTop: 25, justifyContent: "flex-end" }}
>
<Dialog.Close asChild>
<button className="Button green">Save changes</button>
</Dialog.Close>
</div>
<Dialog.Close asChild>
<button className="IconButton" aria-label="Close">
<Cross2Icon />
</button>
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
When i resize the window from bottom to top over the modal, the Save changes button remains outside the modal, but i want to drag it at the top with the bottom window border. Question: How to solve the issue?
demoL: https://codesandbox.io/s/flamboyant-hamilton-3bx0h3

Answer 1

Assuming that the goal is to contain Button when resizing the window, perhaps try add display: flex and flex-direction: column to the DialogContent class in styles.css:
.DialogContent {
display: flex;
flex-direction: column;
background-color: white;
border-radius: 6px;
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 450px;
max-height: 85vh;
padding: 25px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}