grid-template-columns: 1fr でグリッドがはみ出る場合の対処法

通常はこれで問題なけど、main要素が長すぎる場合に画面外にはみ出てしまいます。

section {
 display: grid;
 grid-template-columns: 1fr 10em;
 grid-column-gap: 2em;
 main {
 }
 nav {
 }
}

解決方法は、1frで指定している子要素に overflow: auto; を追加。

section {
 display: grid;
 grid-template-columns: 1fr 10em;
 grid-column-gap: 2em;
 main {
  overflow: auto;
 }
 nav {
 }
}