CSS Grid布局中select元素导致容器高度异常该如何解决

• CSS Grid 布局下，你未给父容器显式设置交叉轴对齐规则，同时左右两个子容器也设置了display: grid，子容器内部的input、select属于替换元素，默认交叉轴对齐规则为normal，不会自动拉伸填满容器，会按照元素自身默认高度渲染。
• 浏览器原生的input和select控件默认内边距、行高存在差异，通常select的默认高度低于普通文本输入框，最终导致右侧容器被内容撑开的高度更小。

你可以参考以下CSS修改，核心是通过Grid的交叉轴拉伸规则强制容器和内部元素高度对齐：

/* 统一盒模型，避免边框、内边距额外影响高度计算 */
* {
  box-sizing: border-box;
}
.inputwrap{
    display: grid;
    grid-template-areas: 'halfl halfr';
    grid-column-gap: 2%;
    /* 强制左右两个列容器高度保持一致 */
    align-items: stretch;
}
.input50r{
    grid-area: halfr;
    display: grid;
    /* 让内部表单元素自动拉伸填满容器高度 */
    align-items: stretch;
}
.input50l{
    grid-area: halfl;
    display: grid;
    /* 让内部表单元素自动拉伸填满容器高度 */
    align-items: stretch;
}
/* 可选：手动统一两个表单控件的样式，抹平浏览器原生差异 */
.input50l input, .input50r select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

如果不需要子容器保留Grid布局，也可以直接移除.input50r和.input50l的display: grid属性，配合父容器的align-items: stretch也能实现高度对齐。

内容的提问来源于stack exchange，提问作者user16394646