Material ui react: Long typography body forces a new row-CodePudding

I'm using Materiual ui grid system to simply create two columns next to each other. The Lorem ipsum text forces the right column into a new row. When shortening the text, it will display correctly in two columns.

<Grid container justifyContent="space-around">
  <Grid item>
    <img src={cta} alt="call to action" />
  </Grid>
  <Grid item>
    <Grid container direction="column">
      <Grid item>
        <Typography variant="h1">Header right side</Typography>
      </Grid>

      <Grid item>
        <Typography variant="body1">
          Lorem insectetur adipisicing elit. Earum commodi inventore, nisi
          corruLorem insectetur adipisicing elit. Earum commodi inventore,
          nisi corruLorem insectetur adipisicing elit. Earum commodi
          inventore, nisi corru
        </Typography>
      </Grid>
    </Grid>
  </Grid>
</Grid>

What should I do to make the text wrap and not force a new line?

CodePudding user response：

You can pass prop wrap="nowrap" in <Grid>, you can see more info about the Grid props here

Here is a sandbox

 <Grid container wrap="nowrap" justifyContent="space-around">
      <Grid item>
        <img src="https://picsum.photos/200/300" alt="call to action" />
      </Grid>
      <Grid item>
        <Grid container direction="column">
          <Grid item>
            <Typography variant="h1">Header right side</Typography>
          </Grid>

          <Grid item>
            <Typography variant="body1">
              Lorem insectetur adipisicing elit. Earum commodi inventore,
              nisiLorem insectetur adipisicing elit. Earum commodi inventore,
              nisiLorem insectetur adipisicing elit. Earum commodi inventore,
              nisi ru Lorem insectetur adipisicing Lorem insectetur adipisicing
              elit. Earum commodi inventore, nisiLorem insectetur adipisicing
              elit. Earum commodi inventore, nisiLorem insectetur adipisicing
              elit. Earum commodi inventore, nisiLorem insectetur adipisicing
              elit. Earum commodi inventore, nisiLorem insectetur adipisicing
              elit. Earum commodi inventore, nisi. Earum commodi inventore,
              nisiLorem insectetur adipisicing elit. Earum commodi inventore,
              nisiLorem insectetur adipisicing elit. Earum commodi inventore,
              nisi
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

CodePudding user response：

If you add the amount of columns you want each Grid to use, you can create a 2 column layout. You can give each Grid xs={6} meaning, if larger than xs, have 6 columns. (Of the default 12 column Grid)

<Grid container justifyContent="space-around">
  <Grid item xs={6}>
    <img src={'cta'} alt="call to action" />
  </Grid>
  <Grid item xs={6}>
    <Grid container direction="column">
      <Grid item>
        <Typography variant="h1">Header right side</Typography>
      </Grid>
      <Grid item>
        <Typography variant="body1">
          Lorem insectetur adipisicing elit. Earum commodi inventore, nisi corruLorem insectetur adipisicing elit.
          Earum commodi inventore, nisi corruLorem insectetur adipisicing elit. Earum commodi inventore, nisi corru
        </Typography>
      </Grid>
    </Grid>
  </Grid>
</Grid>