布局内容容器无法随内容自适应高度问题求助

我有一个包含全局导航栏、侧边导航和页面内容的Web应用布局，当前设置下页面内容容器无法随内容自动增长。当子元素设置height:150%时，滚动到底部后外层的padding:1rem会不可见，请问能否让设置了flex-grow: 1的组件拥有子元素的完整高度，而非仅屏幕高度？

现有代码 #

React 组件代码 #

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",
          boxSizing: "border-box"
        }}
      >
        <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"));

HTML 代码 #

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

问题核心是外层flex容器设置了固定高度height: calc(100vh - 3.25rem)，导致容器无法随内部内容自适应延伸，子元素的height:150%基于这个固定高度计算，超出部分会覆盖容器底部padding。

可以通过以下步骤调整：

• 替换固定高度为最小高度：把外层容器的height改为min-height: calc(100vh - 3.25rem)，这样容器在内容不足时保持屏幕高度，内容超出时自动撑开，底部padding不会被遮挡。
• 调整侧边导航的粘性定位：把侧边导航的top值改为1rem（对应外层容器的padding），同时添加alignSelf: "flex-start"，确保滚动时侧边导航不会被全局导航栏遮挡。
• 修改主内容高度设置：用min-height: 150vh替代height:150%，让主内容直接基于视口高度延伸，避免依赖父容器的固定高度。

调整后的完整组件代码：

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

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

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