React中Radix UI模态框窗口溢出问题解决方案咨询

我正在使用Radix UI创建模态框，代码如下：

<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>

当从下往上调整窗口大小覆盖模态框时，Save changes按钮会停留在模态框外部，我希望它能随窗口底部边界上移，请问该如何解决这个问题？

问题源于模态框内容缺少自适应布局约束，可通过以下步骤修复：

• 给Dialog.Content设置垂直flex布局，并限制最大高度为视口百分比，避免内容超出窗口：

  <Dialog.Content 
    className="DialogContent" 
    style={{ 
      width: "unset",
      display: "flex",
      flexDirection: "column",
      maxHeight: "90vh"
    }}
  >
  

• 让中间的滚动区域自动填充剩余空间，保留滚动功能：

  <div
    style={{ 
      maxWidth: "300px",
      flex: 1,
      overflow: "auto"
    }}
  >
  

• 调整底部按钮容器的外边距，让按钮固定在模态框底部，窗口缩小时滚动区域优先被压缩：

  <div
    style={{ 
      display: "flex",
      marginTop: "auto",
      justifyContent: "flex-end",
      paddingTop: 25
    }}
  >
  

调整后，模态框内容会自适应窗口高度，底部按钮始终保持在模态框内部，不会被窗口边界截断。

内容的提问来源于stack exchange，提问作者Asking