React条件渲染时如何实现div高度响应式自适应

出现内容溢出的核心原因有两个：

• 外层容器仅设置了maxHeight: 100vh，没有强制约束容器高度等于视口高度，内容超出时不会自动限制内部元素尺寸
• 没有做垂直方向的空间分配，图片默认按自身原始像素尺寸渲染，上方插入新内容时，整体内容总高超过容器高度就会溢出

使用Flex纵向布局实现自适应是成本最低的方案，不需要写JS动态计算高度，天然支持上方不定高内容（列表、动态表单这类场景都能适配），修改步骤如下：

• 外层容器改为固定height: 100vh，开启纵向Flex布局，添加溢出隐藏
• 包裹图片的容器设置为自动占满剩余垂直空间，添加minHeight: 0修复Flex子项默认最小高度为auto导致的撑破容器问题
• 图片设置最大宽高不超过父容器，保持宽高比自动缩放

修改后的完整代码如下：

import { useState } from 'react';

function App() {
  const [show, setShow] = useState(false);
  return (
    <div
      style={{
        border: "solid",
        width: "100%",
        // 固定容器高度为视口高度，开启纵向flex布局
        height: "100vh",
        maxHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden"
      }}
    >
      {show && (
        <div>
          <div style={{ height: "300px", backgroundColor: "red" }}></div>
          <button
            onClick={() => {
              setShow(false);
            }}
          >
            Close
          </button>
        </div>
      )}
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          // 占满其他元素之外的所有剩余垂直空间
          flex: 1,
          // 必加：避免flex子项被内容撑高溢出
          minHeight: 0
        }}
      >
        <img
          src="https://i.imgur.com/LiAUjYw.png"
          alt="test"
          style={{
            // 图片自适应父容器尺寸，保持原有比例
            maxWidth: "100%",
            maxHeight: "100%",
            height: "auto",
            width: "auto"
          }}
        />
      </div>
      <button onClick={() => setShow(true)}>Show</button>
    </div>
  );
}

• 初始状态下上方无额外渲染内容，图片容器会占满除底部按钮外的所有视口空间，图片自动缩放到适配尺寸
• 点击Show展示上方内容时，Flex会自动重新计算剩余可用空间，图片容器高度自动缩减，图片等比缩小，全程不会出现内容溢出容器的问题

补充提示：如果上方条件渲染的内容高度可能超过视口（比如长列表），可以给条件块的外层容器加上overflow-y: auto，让超长内容在块内滚动，避免把图片区域压缩到不可见。

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