javascript - 排版文本没有换行

Question

这是我的聊天框组件，我将聊天映射到弹性框，但排版元素没有用多行消息打破界限

  import React from "react";
  import Chip from "@material-ui/core/Chip";
  import Typography from "@material-ui/core/Typography";
  import { useStyles } from "./dashboad";
  import { GlobalContext } from "../context";
  import Box from "@material-ui/core/Box";
  const Chat = () => {
    const classes = useStyles();
    const { chats, activeTopic } = GlobalContext();
    if (activeTopic) {
      return (
        <div className={classes.chat}>
          <div
            style={{
              height: "100%",
              overflowY: "scroll",
              overflowX: "hidden",
              width: "100%",
            }}
          >
            {chats[activeTopic].map((chat, i) => (
              <div className={classes.flex2} key={i}>
                <Chip label={chat.from} className={classes.chip} />
                <Typography component="p">{chat.msg}</Typography>
              </div>
            ))}
          </div>
        </div>
      );
    }
    return <div>Loading</div>;
  };
  export default Chat;

这是我对 flex2 类的样式

    flex2: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "80%",
    height: "auto",
    "& > *": { marginRight: "5px" },
  },

标签： javascriptreactjsflexboxmaterial-ui