[css]grid-gapを％で設定したら親要素の高さがおかしい

cssのgridを使ってコンテナの高さ幅にそれぞれギャップ（間）を持たせるために、％で指定をしたところ、親要素の高さが「grid全体の高さ−（設定したギャップ×row数）」になってしまい、次の要素が被るという現象が起きました。

原因追及までしていないのですが、gapの設定を「px」若しくは「em」「rem」にすることで高さの認識が出来ました。今回の記事は、そのメモです。

overflow hiddenも試してみたのですが、そもそも高さが認識されていない状態で、hiddenによりちょん切られてしまいますので、効果なしです。

基となるHTML↓

<section>
    <ul>
      <li>aaaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaaa</li>
    </ul>
</section>

高さがおかしくなったコード（gap%指定）

section {
    & ul {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: minmax(80px, auto);
        grid-gap: 5%; // ⇒グリッド間に5%のギャップを設ける設定

        & li {
            background-color: $sub-color;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            padding: 5%;
        }
    }
}

grid-gapの部分を％で設定しています。
そうしたところ、親要素であるulの高さが「ギャップを除いたグリッドの高さ」になってしまいました。

親要素にグリッドの高さを認識させるために

section {
    & ul {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: minmax(80px, auto);
        grid-gap: 1rem; // ⇒グリッド間に1remのギャップを設ける設定

        & li {
            background-color: $sub-color;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            padding: 5%;
        }
    }
}

gapの命令をremにしたところ、ちゃんと高さを認識する事ができました。
remの他にも、px、emで高さを認識する事を確認しております。

％設定は相対値だからダメだったのかなと思いつつ、remもemも相対値だよねと思いながら、、とりあえずよしとしました。