CSSのwhite-space: nowrap;やwhite-space: pre;を使用すると、テキストが折り返されずに表示されます。しかし、Flexbox や CSS Grid のレイアウト内でこのような要素を含むと、コンテナの幅を超えてレイアウトが崩れることがあります。本記事では、そのような問題が発生する原因と対処法について解説します。

LINE着せかえ「回るお寿司」販売中！

レイアウトが崩れる現象の確認

まずは、レイアウトが崩れる現象を確認していきます。Flexbox、CSS Grid ともに、サイドバーが 30% で、残りの幅がメインカラムというレイアウトを想定しています。

.flex {
  display: flex;
  gap: 15px;
}

.flex .main {
  flex-basis: calc(70% - 15px);
}

.flex .sidebar {
  flex-basis: 30%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 15px;
}

pre {
  max-width: 100%;
  color: #fff;
  background: #222;
  overflow: scroll;
}

このレイアウトで、中のpre要素にwhite-space: wrap;とwhite-space: pre;を指定した場合の比較が以下のサンプルです。

See the Pen Untitled by YUTSUZO (@YUTSUZO) on CodePen.

white-space: pre;が指定されている方は、サイドバーの幅が縮んだり、はみ出してしまっているのが確認できます。これは、pre要素にmax-width: 100%;やoverflow: scroll;が指定されていても発生します。

レイアウトが崩れる原因

このような現象は、Flexbox や CSS Grid の子要素であるflexアイテムやgridアイテムが、デフォルトでmin-width: auto;となっているため起こります。

レイアウトが崩れる場合の対処法

Flexbox や CSS Grid で、nowrapやpreの影響でレイアウトが崩れる場合、そのような要素を含むflexアイテムもしくはgridアイテムにmin-width: 0;を指定することで解決できます。

今回の場合、pre要素が含まれているのは.mainなので、以下のようにスタイルを追加します。

.main {
  min-width: 0;
}

以下は、.mainにmin-width: 0;を追加した場合のサンプルです。

See the Pen Untitled by YUTSUZO (@YUTSUZO) on CodePen.

Flexbox、CSS Grid ともに、レイアウトの崩れがなくなったのが確認できます。

まとめ

Flexbox や CSS Gridで、white-space: nowrap;やpreの影響でレイアウトが崩れる場合、min-width: 0;を適用することで解決できます。レイアウトの崩れに悩んでいる方は、今回紹介した方法を試してみてください！

参考

タグ: