MDNのレイアウト表示が崩れてしまう(Chrome限定)

Question

困っていること

ChromeブラウザでMDNのページを表示すると、
「試してみましょう HTML Demo」のコンポーネントの横幅がとても狭く表示され、
HTMLコード例が折り畳まれてしまいます。

何の設定が悪さをしているのか見つけれず、困っています。

似た状況に陥って、解決された方居ないでしょうか？
また、追加で確認してみると良さそうな設定について、心当たりある方居られないでしょうか？

私の環境について

macOS Monterey ver.12.5.1
Chrome 108.0.5359.124（Official Build）

試してみたこと

他ブラウザ(Firefox, Safari)で表示してみる

他ブラウザ(Firefox, Safari)だと適切に広く表示できました。
このことから、私のChrome環境に原因がありそうです。

Chromeアドオンをすべて無効化してみる

Chromeにインストールしたアドオンが原因かもと思い、
一通りアドオンを無効にしてみましたが、表示は狭いままで改善しなかったです。

Chromeシークレットモードで表示してみる

表示は狭いままで、改善しなかったです。

Answer 1

自己解決しました。

ブラウザのフォントサイズ設定を「中（推奨）」にすることで、解決できました。
（レイアウトが崩れていたときは、サイズを極大設定にしていました。）