display: grid で1frを指定した際に中身がはみ出て表示される

display: grid で1frを指定した際、中に含める要素によって横スクロールバーが表示されてしまうということがあったので、対応方法をメモ。

サンプルコード

まずは1frを使った実装例です。
今回はメインセクションとサブセクションがあるようなレイアウトで、SP時は縦積み、PC時は横並びにするという実装を行います。

<div class="contents">
  <div class="main">メイン</div>
  <div class="sub">サブ</div>
</div>

.contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "sub";
  gap: 20px;
}
.main {
  grid-area: main;
  background-color: orange;
}
.sub {
  grid-area: sub;
  background-color: purple;
}
@media screen and (min-width: 768px), print {
  .contents {
    grid-template-columns: 1fr 200px;
    grid-template-areas: "main sub";
    max-width: 1200px;
    margin-inline: auto;
  }
}

これでベースのレイアウトの実装ができました。
display: grid + 1frのデモページ

上記で作成したメインセクションに、横スクロールする表組みを追加してみます。

<div class="contents">
  <div class="main">
    <div class="table-wrap">
      <table class="table">
        <tr>
          <th>打率</th>
          <th>試合</th>
          〜 略 〜
          <td>.622</td>
          <td>1.014</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="sub">サブ</div>
</div>

tableがコンテンツ幅より広い場合、横スクロールになるように設定します。

.contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "sub";
  gap: 20px;
}
.main {
  grid-area: main;
  background-color: orange;
}
.sub {
  grid-area: sub;
  background-color: purple;
}
@media screen and (min-width: 768px), print {
  .contents {
    grid-template-columns: 1fr 200px;
    grid-template-areas: "main sub";
    max-width: 1200px;
    margin-inline: auto;
  }
}

.table-wrap {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table {
  min-width: 100%;
  width: max-content;
}
th, td {
  padding:5px 10px;
}

これでtableの実装的は問題ないのですが、SP時の画面幅の狭い状態で確認した時、display: grid + 1frのレイアウト内だとコンテンツ幅からはみ出してしまうようでした。
display: grid + 1frに横スクロールのtableを追加するデモページ

対応方法としてはminmax()を使って、最小幅を0とすると解消されるようでした。

.contents {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "sub";
  gap: 20px;
}
.main {
  grid-area: main;
  background-color: orange;
}
.sub {
  grid-area: sub;
  background-color: purple;
}
@media screen and (min-width: 768px), print {
  .contents {
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-areas: "main sub";
    max-width: 1200px;
    margin-inline: auto;
  }
}

.table-wrap {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table {
  min-width: 100%;
  width: max-content;
}
th, td {
  padding:5px 10px;
}

解消後のデモページ