text 折返しされない

環境
・ react
・ typescript
・ styled-components

幅いっぱいまであるときに文字数が多かったら改行してあげたくスタイルにword-break: break-all;をつけてあげているのですが改行されず,{introduction}が横に表示されてしまいます。
画像のように赤枠のとこをはみ出して横に表示されてしまっている。
どこがおかしいのかがわかりません。
わかる人いましたらご教授お願いしたいです。

import { TextField } from "components/atoms/TextField";
import { UserHeader } from "components/organisms/UserHeader";
import React, { FunctionComponent } from  “react

const SectionItem1 = styled.section`
overflow-y: auto;
padding: 24px 16px;
`;

const SectionItem2 = styled.section`
padding: 24px;
overflow-y: auto;
`;

const SectionItem3 = styled.section`
padding: 24px;
overflow-y: auto;
`;

const LabelStyle = styled.div`
  width: 100%;
  background: red;
  border-radius: 4px;
  word-break: break-all;
  grid-auto-columns: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 8px;
  align-items: center;!
`;

export const Message: FunctionComponent<Props> = () => {

const introducrion =
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
return (
  <MainContainer>
    <SectionItem1 />
    <SectionItem2 />
    <SectionItem3>
      <UserHeader
        name={"佐藤"}
        job={"学生"}
      />
     <LabelStyle height={100}>{introduction}</LabelStyle>
     <TextField />
   </SectionItem3>
  </MainContainer>
  );
};