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

Question

実現したいこと

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

前提

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

発生している問題

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

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

該当のソースコード

<div class="outer">
    <div class="box">
        <div class="name">aaa</div>
    </div>

    <div class="box">
        <div class="name">bbb</div>
    </div>

    <div class="box">
        <div class="name">ccc</div>
    </div>

    <div class="box">
        <div class="name">ddd</div>
    </div>

    <div class="box">
        <div class="name">
            <input type="text" placeholder="入力">
        </div>
    </div>
</div>

.outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}
.name {
    background: skyblue;
}

試したこと

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

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

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

特にございません。

Answer 1

下記でどうでしょう。

.name input[type="text"] {
  max-width: 15em;
  width: 100%;
  box-sizing: border-box;
}

Comments

[origa3]

ありがとうございます。ばっちりでした。それにしても`box-sizing: border-box;`で解消するロジックがわからないのですが、もしよろしければ教えていただけませんでしょうか。

[hatena19]

画面幅に応じてテキストボックスが拡縮するのは、width: 100%; を設定しているからです。
ただし、既定では幅はpaddingとborderを含めずに計算しますので、paddingとborderの分親要素からはみ出します。それを防ぐために、box-sizing: border-box; でpaddingとborderを含めて計算するように設定しています。

[origa3]

ご返信ありがとうございます。大変勉強になりました。