CSS网格奇怪的行为

Question

我有以下html / css：

.grid {
            display: grid;
            background: pink;
            width: 500px;
        }
        .grid {
            grid-template-columns: 1fr 2fr;
        }

    <div class="grid">
        <div>
            <select name="" id="">
                <option value="">select asd asda sdasd a sdas das dsdas das dasd</option>
            </select>
        </div>
        <input type="text">
    </div>

当选项值“ select asd ...”短时，表示设计正确-选择为1分数，输入为2个分数（按样式指定）。

如果文本较大（如上所述），则选择内容将变大，并且我不能依靠CSS网格。

这是CSS网格的错误，如何解决？

谢谢