CSSのgridで一方の幅だけ縮んでしまいます

実現したいこと

CSSで要素を２列に並べるためにdisplay: grid;を採用し、２列とも常に同じ幅にしたいです。

前提

1. CSSのみで完結させたいです。
2. display: flex;ではありません。
3. 画面幅と要素幅は可変的です。
4. 該当のソースコードの.outerは実際にはtd直下要素です。（つまりtable内のあるセルの中の要素.boxを等幅で２列に並べたいということです。）

発生している問題

該当のソースコードでは、画面幅の縮小に応じて、なぜか右側の列の幅だけが縮んでしまいます。

下図の緑の幅だけ縮むということです。

該当のソースコード

html

1<div class="outer">2 <div class="box">3 <div class="name">aaa</div>4 </div>5 6 <div class="box">7 <div class="name">bbb</div>8 </div>9 10 <div class="box">11 <div class="name">ccc</div>12 </div>13 14 <div class="box">15 <div class="name">ddd</div>16 </div>17 18 <div class="box">19 <div class="name">20 <input type="text" placeholder="入力">21 </div>22 </div>23</div>

css

1.outer {2 display: grid;3 grid-template-columns: 1fr 1fr;4 grid-gap: 5px;5}6.name {7 background: skyblue;8}

試したこと

input要素を削除、またはdisplay: none;することで解消しました。
そこでinput要素にwidth: auto;やmax-width: 100%;を指定しましたが解消できませんでした。

原因と対策を知りたいです。
よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

特にございません。