我有一个Web应用程序的布局，其中包括导航栏，侧导航和页面内容。不幸的是，在当前的设置中，页面内容容器不会随着内容的增长而增长。

function App() {
  return (
    <React.Fragment>
      <div style={{ backgroundColor: "blue", height: "3.25rem" }}>
        Global navigation
      </div>
      <div
        style={{
          display: "flex",
          padding: "1rem",
          gap: "1rem",
          height: "calc(100vh - 3.25rem)",
          width: "100%",
          maxWidth: "1600px",
          overflow: "auto",
        }}
      >
        <div
          style={{
            width: "15rem",
            backgroundColor: "red",
            position: "sticky",
            top: "0",
          }}
        >
          Side navigation
        </div>
        <div style={{ flexGrow: "1" }}>
          <div style={{ height: "150%", backgroundColor: "green" }}>
            Main content
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

个字符
有没有一种方法可以让这个组件与flex-grow：1有充分的高度它的孩子，不仅屏幕大小？
我问的原因是因为当我有这个高度150%时，当我向下滚动时，1rem的填充是不可见的。