如何在不使用height: calc的情况下为flexbox子元素添加overflowY

完全可以不用calc，甚至不需要额外设置height:100%就能实现需求。核心是利用Flex布局的默认拉伸特性，配合明确的父容器高度和溢出控制：

关键修改点 #

1. 父容器将min-height:100vh改为height:100vh，确保它占据整个视口高度，为子元素提供明确的高度参考。
2. 移除蓝色子容器的固定height:500px，添加overflow:auto——当内容高度超过子容器自身高度（即视口高度）时，自动触发垂直滚动条，内容未超出时则无滚动条。

修改后的代码 #

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        gap: "20px",
        background: "pink",
        height: "100vh"
      }}
    >
      <div
        style={{
          flex: 1,
          background: "green"
        }}
      >
        Container 1
      </div>
      <div
        style={{
          flex: 1,
          background: "lightblue",
          overflow: "auto"
        }}
      >
        <p>{TEXT}</p>
        <p>{TEXT}</p>
        <p>{TEXT}</p>
      </div>
    </div>
  );
}

关于height:100%的使用 #

如果一定要用height:100%，也是可行的。只要父容器有明确的高度值（比如height:100vh），子容器设置height:100%+overflow:auto即可，效果和上面一致：

// 蓝色子容器样式示例
style={{
  flex: 1,
  background: "lightblue",
  height: "100%",
  overflow: "auto"
}}

原理是：横向Flex布局下，子元素默认的align-items:stretch会让子元素高度自动匹配父容器高度；即使手动设置height:100%，因为父容器高度明确，百分比高度也能正确计算。

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