Как предотвратить переполнение внутреннего содержимого родительского компонента?

Question

Я разрабатываю компонент для своего приложения для социальных сетей. Этот компонент позволит пользователю поделиться своей целью с друзьями. Дизайн выглядит хорошо на широких экранах, но на экранах меньших размеров он выглядит так, как показано ниже.

Я изначально думал, что исправление для этого будет отменено типографика использует вместо этого адаптивную типографику, но это не решило проблему.

Я думаю, что исправить это можно было бы, если бы родительский контейнер увеличился, чтобы в нем содержалась типография, заполняющая его. Как бы я выполнил sh это с помощью Material UI? Кодовая песочница для моего проекта находится здесь: https://codesandbox.io/s/goal-post-design-yvvjp

Код компонента указан ниже:

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>
  );
}

Answer 1

Вы можете использовать:

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

или

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

увеличение высоты компонента бумаги в зависимости от объема содержимого:

paper: {
      height: "auto"
}

До:

Настольная версия

iPhone 5 / SE

После:

Настольная версия

iPhone 5 / SE

Answer 2

Если стекирование - то, что вам нужно, я изменил стили, чтобы он не имел фиксированной высоты, и добавил заполнение

const useStyles = makeStyles(theme => ({
  paper: {
    padding: "15px"
  }
}));

Затем добавил sm в сетку

<Grid
  item
  container
  direction="column"
  justify="center"
  alignItems="center"
  xs={12}
  sm={3}
>
  <Avatar />
  <Typography variant="subtitle2">Benjamin world</Typography>
</Grid>
<Grid item xs={12} sm={9}>
  <Typography variant="body1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
    quam lorem, malesuada sed sapien non.
  </Typography>
</Grid>