Select 元素无法与 CSS 网格一起正常工作

Question

标题。我已经设法使用网格并排对齐 2 divs，这很好，但是一旦第二个 div 的内容是 select 元素，第二个 div 由于某种原因变短了，我该如何解决？

CSS

.inputwrap{
    display: grid;
    grid-template-areas: 'halfl halfr';
    grid-column-gap: 2%;
}
.input50r{
    grid-area: halfr;
    display:  grid;
}
.input50l{
    grid-area: halfl;
    display:  grid;
}

HTML

<div class='input50l'>
  <input type='password' name='encKey' placeholder='Password' />
</div>
<div class='input50r'>
  <select>
    <option>Option</option>
    <option>Option</option>
  </select>
</div>

problem example

select 元素没有特殊样式，只是修饰

Answer 1

.inputwrap{
    display: grid;
    grid-template-areas: 'halfl halfr';
    grid-column-gap: 2%;
    grid-template-columns: 1fr 1fr;
}

Select 元素无法与 CSS 网格一起正常工作

Select element not working properly with CSS grid

html

css

grid

select