Material-UI : Long Text Wrapped in Grid

In the docs of Material-UI, in the section Grid: white-space: nowrap; there is an exemple of the text wrapped in codesandbox.

In this exemple I replace const message ="" by a long text without space:

const message ="AsuperLongTextWithNoSpaceItIsVeryAnnoyingIWantToWrapThisSentence"

The result:

As you can see the message exceeds the grid. I want that the message wraps the line.

I tried to add style={{'overflowWrap': 'break-word'}} like this:

<Paper className={classes.paper}>
  <Grid container wrap="nowrap" spacing={2}>
    <Grid item>
      <Avatar>W</Avatar>
    </Grid>
    <Grid item xs>
      <Typography style={{'overflowWrap': 'break-word'}}>{message}</Typography> {/* style added */}
    </Grid>
  </Grid>
</Paper>

The result:

As you can see it's better, but the text exceeds the grid too.

How to do this correctly without going over the grid?

EDIT (1)

I have a grid in a grid:

<Grid container spacing={2}>
    <Grid item>
        <Avatar>
            <ImageIcon />
        </Avatar>
    </Grid>
    <Grid item xs={12} sm container >
        <Grid item xs container direction="column" spacing={2} wrap="nowrap">
            <Grid item xs>
                <Typography gutterBottom variant="subtitle1">
                    {`${props.comment.username}`}
                </Typography>
            </Grid>
            <Grid item xs zeroMinWidth>
                <Typography gutterBottom variant="subtitle1" style={{'overflowWrap': 'break-word'}}>
                    {props.comment.comment}
                </Typography>
            </Grid>
            <Grid item container>
                <Grid item>
                        <IconButton onClick={handleMenuClick}>
                            <ThumbUp />
                        </IconButton>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
    <Grid item>
        <IconButton onClick={handleMenuClick}>
            <MoreVertIcon />
        </IconButton>
    </Grid>
</Grid>

My container has wrap="nowrap", my item has zeroMinWidth, but the result is:

Instead of this:

EDIT (2)

I found the solution:

It must to write zeroMinWidth for each <Grid item> !

This works (note zeroMinWidth):

      <Paper className={classes.paper}>
        <Grid container wrap="nowrap" spacing={2}>
          <Grid item>
            <Avatar>W</Avatar>
          </Grid>
          <Grid item xs zeroMinWidth>
            <Typography style={{overflowWrap: 'break-word'}}>{message}</Typography>
          </Grid>
        </Grid>
      </Paper>