Can't handle overflowing code block under mjml-text

[softmarshmallow]

<mjml>
  <mj-head>
    <mj-font name="Source Code Pro" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap" />
    <mj-attributes>
      <mj-text font-size="14px" align="left" color="black" font-family="Source Code Pro" />
      <mj-section background-color="#fff" />
      <mj-social-element icon-size="24px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#eee">
    <mj-section>
      <mj-column>
        <mj-text font-weight="bold">
          <code>
            <pre style="background-color: black; padding:12px">123456789098765432345678987654323456789876544567898765434567898765456788765456789876556789876556787654</pre>
          </code>
        </mj-text>
      <mj-column>
    </mj-section>
  </mj-body>
</mjml>

Cannot find a way to handle overflowing content in mj-text with code block styling overflow:scroll; won't do.

[iRyusa]

Not really related to MJML here it's specific to HTML CSS https://www.caniemail.com/search/?s=word-break can be used to try minimize the impact but it's not perfect

[softmarshmallow]

It was caused by pre changing pre to p did the trick.

word-break won't be applied to pre tag.