React(MUI)列表项高度统一：描述文本动态适配剩余空间求助

完全可行，不需要给父容器设置固定高度就能实现需求：所有列表项高度统一，描述区域自动填充父容器剩余空间，窗口 resize 时自动调整显示行数。以下是具体实现步骤：

1. 用 Grid 布局统一列表项高度 #

首先给整个列表容器使用 CSS Grid 布局，Grid 会自动让同一行的所有列表项高度与该行最高项保持一致，这是实现列表项等高的核心：

import { Box, Typography, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';

// 列表容器组件
const DescriptionList = ({ items }) => {
  return (
    <Box 
      sx={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', // 响应式列宽
        gap: 2 // 列表项间距
      }}
    >
      {items.map(item => (
        <ListItem key={item.id} title={item.title} description={item.description} />
      ))}
    </Box>
  );
};

2. 列表项内部用 Flex 分配空间 #

每个列表项采用垂直 Flex 布局，让标题区自适应高度，描述区自动填充剩余空间：

// 单个列表项组件
const ListItem = ({ title, description }) => {
  return (
    <Box 
      sx={{ 
        display: 'flex', 
        flexDirection: 'column', 
        height: '100%', // 占满Grid分配的高度
        padding: 2,
        border: '1px solid #e0e0e0' // 可选：便于观察布局
      }}
    >
      {/* 标题区（红框）：自适应内容高度 */}
      <Box 
        sx={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center', 
          marginBottom: 1,
          border: '1px solid red' // 标记红框
        }}
      >
        <Typography variant="h6">{title}</Typography>
        <IconButton size="small">
          <CloseIcon />
        </IconButton>
      </Box>

      {/* 描述区（蓝框）：填充剩余空间，自动截断 */}
      <Box 
        sx={{ 
          flex: 1, // 占用标题区之外的所有剩余空间
          overflow: 'hidden',
          border: '1px solid blue' // 标记蓝框
        }}
      >
        <Typography 
          variant="body2" 
          sx={{
            height: '100%',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            // 不设置固定line-clamp，让文本根据可用高度自动换行截断
          }}
        >
          {description}
        </Typography>
      </Box>
    </Box>
  );
};

核心原理说明 #

• Grid 布局确保所有列表项高度统一，无需手动设置固定值
• Flex 布局的 flex:1 让描述区自动填充父容器剩余空间，高度随窗口 resize 动态变化
• 文本使用 -webkit-box 流式布局，不指定固定行数，会在当前可用高度内自动换行，超出部分自动截断，实现动态行数适配

兼容性补充 #

如果需要兼容非 WebKit 内核浏览器（如旧版 Firefox），可以通过 JavaScript 监听元素高度变化，动态计算并设置 line-clamp 值，但现代主流浏览器（Chrome、Edge、Safari、新版 Firefox）均支持 -webkit-box 方案，足以覆盖绝大多数场景。

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