CSS Gridで1fr指定時に横幅がはみ出して横スクロールが出る問題

CSS Grid で grid-template-columns を 1fr にした場合に、横幅がはみ出して横スクロールが出てしまう場合の対応メモ。
どうも1frにした要素の中に横スクロール可能なコンテンツがある場合におきる現象のようです。
私の場合は、Highlighting Code Blockで、長めのコードを書いたときに横スクロールが出てしまいました。

親要素で対応する

1frと設定した子要素の最小コンテンツサイズはautoのため、子要素の中にスクロール可能なコンテンツがあると幅が拡大してしまうということのようです。
そのため、以下のようにminmaxで最小固定サイズを定義することで解決します。

/* 親要素で対応 */ 
.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

子要素で対応する

子要素側でも対応可能です。その場合は overflow: hidden; または min-width: 0; とします。

/* 子要素で対応 その1 */  
.wrapper__main {
  overflow: hidden;
}

/* 子要素で対応 その2 */  
.wrapper__main {
  min-width: 0;
}