TabelCell-如何使TableCell内容仅占据屏幕的其余部分并包装

Question

最后一列是我要解决的问题。如果我不理会它，并且不对其应用任何样式，则内容将超出屏幕边缘，并且最终会出现一个scroolbar。我希望它包装而不是生成滚动条。当我将overflowX设为“隐藏”时，根本不会显示该内容。我的目标是将内容包装起来：

column 1 | column 2 | column 3                                       |
apples   | are good | apples are good apples are good apples are good| 
                    | apples are good apples are good apples are good| 
pears    | are great| pears are great                                | 

现在，我已经有了一个可以正常工作的hack，但是它很丑陋，似乎并不是正确的方法。骇客是：

              <span
                style={{
                  wordWrap: "break-word",
                  display: "block",
                  width: "1000px"
                }}
              >
                {comment.message}
              </span>

整个代码是：

const styles = theme => ({
  tableWrapper: {
    overflowY: "auto",
    maxHeight: "500px"
  },
  table: {},
  thingOneCell: {
    verticalAlign: "200px",
    width: "225px"
  },
  thingTwoCell: {
    verticalAlign: "top"
  },
  thingThreeCell: {
    verticalAlign: "top"
  }
});

<CardContent>
          <div className={classes.tableWrapper}>
            <Table className={classes.table}>
              <TableHead>
                <TableRow>
                  <TableCell>thing one</TableCell>
                  <TableCell>thing two</TableCell>
                  <TableCell>thing three</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {comments.map(comment => (
                  <TableRow key={comment.id}>
                    <TableCell className={classes.thingOneCell}>
                      {thing.one}
                    </TableCell>
                    <TableCell className={classes.thingTwoCell}>
                      {thing.two}
                    </TableCell>
                    <TableCell classes={{ root: classes.thingTwoCell }}>
                      <span
                        style={{
                          wordWrap: "break-word",
                          display: "block",
                          width: "1000px"
                        }}
                      >
                        {thing.three}
                      </span>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>

我在以前的版本中使用过它，因此它有可能实现，但是我不知道当前发生了什么。