Css 柔性窗格玻璃超过100%高度

它基本上是CSS问题，但由于它被包装在React中，所以我也将其标记为React

演示我的问题： （那些不知道如何反应的人，只需观看现场演示，并使用谷歌Chrome的F12面板查看元素和样式）

因此，我的应用程序中基本上有两个主要部分，

top

one和

bottom

one，以及一个灵活的分隔符，您可以调整它们的大小

我的目标是最终使我的

底部

部分成为聊天区，因此我将其设置为

溢出：滚动

但奇怪的情况是：当我向下调整它的大小时，底部部分的高度变得比屏幕大，这导致溢出不正确

图像示例（查看底部）：

因此，基本上我希望底部的高度始终是相对于顶部和整个屏幕的100%，如果有超过它所能容纳的文本，那么

溢出：滚动将被激活

我尝试（再一次，通过F12）改变那里许多元素的风格，这样它会很好地工作，但我无法实现这个目标

没有现场演示：

完整代码：

App.js

import React from "react";
import "./styles.css";
import SplitPane from "react-split-pane";

export default function App() {
  return (
    <SplitPane split="horizontal">
      <div>test</div>
      <div style={{ overflow: "scroll" }}>
        <LongText />
      </div>
    </SplitPane>
  );
}

说明（关于
App.js
）：

第一个子项：
Top
是最上面的，第二个子项
是最下面的部分（里面有长文本）

我发送的
codesandbox
demo链接中还有一个CSS文件，用于处理分隔符样式。
寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。@Paulie_D将我的问题更改为包含完整的代码（保留了实时演示，但现在没有它也应该可以理解）。寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。@Paulie_D将我的问题改为包含完整的代码（保留了实时演示，但没有它现在也应该可以理解）。
body {
  margin: 0;
}
.Resizer {
  background: rgb(66, 66, 66);
  opacity: 1;
  z-index: 1;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.Resizer.vertical::after {
  content: "";
  height: 100%;
  margin-left: -5px;
  top: 0px;
  width: 11px;
  z-index: 10;
  position: absolute !important;
}

.Resizer.horizontal::after {
  content: "";
  width: 100%;
  margin-top: -5px;
  height: 11px;
  z-index: 10;
  position: absolute !important;
}

.Resizer:hover {
  background: rgb(224, 224, 224);
}

.Resizer.horizontal {
  height: 1px;
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 1px;
  cursor: col-resize;
}

.Resizer.vertical:hover {
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}