Reactjs 如何防止父组件内部内容溢出？

我正在为我的社交媒体应用程序设计一个组件。此组件将允许用户与朋友共享他们的目标。该设计在宽屏幕上看起来不错，但在较小的屏幕上，其外观如下图所示

我原本以为解决这个问题的办法是覆盖排版，改为使用响应式排版，但这并没有解决这个问题

我认为修复的方法是让父容器增长到包含填充它的排版。我将如何使用Material UI实现这一点？我的项目的代码沙盒位于以下位置：

组件的代码如下所示：

import React from "react";
import "./styles.css";
import {
  Container,
  Typography,
  Paper,
  makeStyles,
  Avatar,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    height: "15vh"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <Container>
      <Paper>
        <Grid
          className={classes.paper}
          container
          direction="row"
          alignItems="center"
        >
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

您可以使用：

paper: {
  height: "15vh",
  overflow:"auto"
}

或

使纸张组件高度根据以下内容的多少而增长：

之前：

桌面版

iphone5/SE

之后：

桌面版

iphone5/SE

您可以使用：

paper: {
  height: "15vh",
  overflow:"auto"
}

或

使纸张组件高度根据以下内容的多少而增长：

之前：

桌面版

iphone5/SE

之后：

桌面版

iphone5/SE

---

如果堆叠是你想要的，我已经改变了样式，这样它就不会有固定的高度和添加填充

const useStyles=makestylesTime=>{ 论文：{ 填充：15px } }; 然后将sm添加到网格中

本杰明世界 Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔 我是罗勒姆，我是萨皮安·诺。

---

如果堆叠是你想要的，我已经改变了样式，这样它就不会有固定的高度和添加填充

const useStyles=makestylesTime=>{ 论文：{ 填充：15px } }; 然后将sm添加到网格中

本杰明世界 Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔 我是罗勒姆，我是萨皮安·诺。

---

有没有办法让纸组件的高度根据内容的多少而增长？@Benjamin wofford你可以简单地使用高度：自动有没有办法让纸组件的高度根据内容的多少而增长？@Benjamin wofford你可以简单地使用高度：自动这个答案对于大多数较小的设备来说是一种改进，但在iPhone5上观看时，内容仍然会经过纸质组件/SE@Benjamin-在我发布答案之前，wofford似乎丢失了一些信息。现在看一看，我已经编辑了答案。这个答案对于大多数较小的设备来说是一个改进，但是当在iPhone5上观看时，内容仍然会经过纸质组件/SE@Benjamin-在我发布答案之前，wofford似乎丢失了一些信息。现在看一下，我已经编辑了答案。

paper: {
      height: "auto"
}