こんな時は？

よくあるつまづきポイントの対処法

Flexの要素が横に飛び出してしまう場合の対処法

改行位置がない長い文字列があると、画面幅が狭い時に要素が外側へはみ出してしまうことがあります。

そのような場合は、原因となる要素に.-ovw:any（overflow-wrap: anywhere のユーティリティクラス）を付けてください。

↓

画面幅が狭い時に横にはみ出す例(resizeして確認してください)

LooooooooooooongStrinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

<Flex g='20'>
  <p>LooooooooooooongStrinnnnnnnnnnngs!!!!</p>
  <p>AAA</p>
  <p>BBB</p>
  <p>CCC</p>
</Flex>

↓

はみ出す原因となるテキストに -ovw:any を適用

LooooooooooooongStriiiinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

  <Flex g='20'>
    <Text ovw='any'>LooooooooooooongStriiiinnnnnnnnnnngs!!!!</Text>
    <Text>AAA</Text>
    <Text>BBB</Text>
    <Text>CCC</Text>
  </Flex>