如何解决Material UI Card超出屏幕边界出现横向滚动条的问题？

问题原因 #

你的卡片溢出主要是三个核心配置导致的：

• TimeCard的card样式设置了minWidth: 400，5张卡片加起来最小宽度就需要2000px，远大于常规屏幕宽度，即使开了flexShrink也会因为最小宽度限制无法压缩到更小
• 卡片内的文字用了70px、65px这类超大的固定字号，内容本身就撑大了容器宽度
• Grid容器内没有嵌套Grid item组件，无法正确触发MUI Grid的宽度分配逻辑

解决方案 #

1. 修改TimeCard组件样式

import * as React from 'react';
import {
  Card,
  CardHeader,
  CardMedia,
  CardContent,
  Typography,
  useMediaQuery,
  useTheme
} from '@mui/material';
import Icon from './images/icon.png';
import { makeStyles } from '@mui/styles';
import { variables } from 'theme';

const useStyles = makeStyles({
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    textAlign: 'center',
    // 移除固定minWidth，增加flex配置允许自由伸缩
    flex: '1 1 0',
    maxWidth: 500,
    height: '100%',
    position: 'relative',
    backgroundColor: '#7b1f82',
    backgroundImage: 'linear-gradient(#891f7e, #6d2386)',
    minHeight: '450px',
    maxHeight: '700px',
    margin: 10,
    padding: '20px 10px',
  },
  mediaSize: {
    width: 70,
    display: 'flex',
    alignSelf: 'center',
  },
  Icon: {
    display: 'flex',
    alignSelf: 'center',
    marginTop: '20px',
    boxShadow: `8px 7px 9px 2px #600562`,
    borderRadius: '50%',
    // 修正原来的无效height值
    height: 90,
    width: 90,
    padding: 7,
  },

  cardHeader: {
    marginBottom: 0,
    padding: 0,
  },
  eventName: {
    margin: '15px 0',
    fontWeight: 600,
    align: 'center',
  },

  cardContent: {
    marginTop: 0,
    paddingTop: 0,
  },

  eventBeginTime: {
    fontWeight: 600,
  },

  eventEndTime: {
    fontWeight: 600,
  },
});

const TimeCard = () => {
  const classes = useStyles();
  const theme = useTheme();
  // 响应式判断：屏幕大于等于iPad尺寸（768px）用大字号，小屏用小字号
  const isPadAndUp = useMediaQuery(theme.breakpoints.up('sm'));
  const eventNameFontSize = isPadAndUp ? '4vw' : '28px';
  const beginTimeFontSize = isPadAndUp ? '3.5vw' : '24px';
  const endTimeFontSize = isPadAndUp ? '3.8vw' : '26px';

  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.Icon}
        component="img"
        image={Icon}
      ></CardMedia>
      <CardHeader
        flexGrow={1}
        className={classes.cardHeader}
        title={
          <Typography className={classes.eventName} align="center" fontSize={eventNameFontSize}>
            Event
          </Typography>
        }
      />
      <CardContent className={classes.cardContent}>
        <Typography color={variables.primary.main} variant="h5">
          Begins
          <Typography className={classes.eventBeginTime} fontSize={beginTimeFontSize}>5:00 AM</Typography>
        </Typography>
        <Typography color={variables.white} variant="h5" mt={1}>
          Ends
          <Typography className={classes.eventEndTime} fontSize={endTimeFontSize}>6:00 AM</Typography>
        </Typography>
      </CardContent>
    </Card>
  );
};
export default TimeCard;

2. 修改TimeCardGrid组件

import * as React from 'react';
import Grid from '@mui/material/Grid';
import { makeStyles } from '@mui/styles';
import TimeCard from './time-card';

const useStyles = makeStyles({
  timeCardGrid: {
    margin: 0,
    width: '100%',
  },
  // 小屏允许横向滚动，保证所有卡片不换行可查看
  scrollWrapper: {
    width: '100%',
    overflowX: 'auto',
  }
});

const TimesGrid = () => {
  const classes = useStyles();
  return (
    <div className={classes.scrollWrapper}>
      <Grid container className={classes.timeCardGrid} wrap="nowrap">
        {/* 每个卡片套Grid item，设置flex=1平均分配宽度 */}
        <Grid item flex={1}>
          <TimeCard />
        </Grid>
        <Grid item flex={1}>
          <TimeCard />
        </Grid>
        <Grid item flex={1}>
          <TimeCard />
        </Grid>
        <Grid item flex={1}>
          <TimeCard />
        </Grid>
        <Grid item flex={1}>
          <TimeCard />
        </Grid>
      </Grid>
    </div>
  );
};

// 修正导出名称和组件名不一致的问题
export default TimesGrid;

效果说明 #

• iPad（768px）及以上尺寸屏幕下，5张卡片会自动平均分配屏幕宽度，完整展示在同一行无需滚动
• 小屏手机如果宽度不足，会出现横向滚动条保证卡片不换行，也可根据需求修改wrap属性为wrap实现自动换行
• 文字尺寸用vw单位配合断点，会跟随屏幕宽度自动缩放，不会出现内容溢出卡片的情况

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