Angular Material输入框适配屏幕宽度及CSS Grid两列布局异常问题

嘿，这个问题我之前也踩过坑！核心原因其实是两个细节没处理好：一是输入框这类表单元素自带默认的最小宽度限制，二是Grid列的设置可能没做到真正的弹性适配。咱们一步步来修复：

问题根源拆解 #

1. 浏览器给输入框默认加了min-width: auto，这会让输入框拒绝缩小到自身内容宽度以下，哪怕Grid列已经被窗口挤压，输入框还是会强行撑宽，导致超出容器边界。
2. 如果你的Grid列用了固定像素值（比如grid-template-columns: 400px 400px），那窗口宽度小于总列宽时，自然会横向溢出。

完整修复代码 #

先上能直接复用的代码，我会逐行解释关键逻辑：

HTML 结构

<div class="grid-container">
  <input type="text" placeholder="左侧输入框">
  <input type="text" placeholder="右侧输入框">
</div>

CSS 样式

/* 全局统一盒模型，避免padding/border额外撑宽元素 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  /* 用1fr让两列平分容器可用空间，完全响应式 */
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* 可选：列之间的间距，按需调整 */
  padding: 1rem;
  /* 确保容器本身不会超出视口宽度 */
  width: 100%;
  max-width: 100%;
}

.grid-container input {
  /* 让输入框占满所在Grid列的宽度 */
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* 关键：移除输入框的默认最小宽度限制 */
  min-width: 0;
}

关键修复点说明 #

• box-sizing: border-box：这是基础配置，让元素的padding和border都包含在设置的宽度内，不会额外撑开元素导致溢出。
• grid-template-columns: 1fr 1fr：fr是Grid的弹性单位，会自动平分容器的可用空间，不管窗口多大，两列始终各占一半宽度。
• min-width: 0：这是解决输入框超出的核心！去掉浏览器给输入框的默认最小宽度限制，让它能跟着Grid列一起自适应缩小。
• width: 100%：确保输入框完全填满所在的Grid列，不会留空隙。

如果你的容器有固定最大宽度需求（比如不想太宽），只需要给.grid-container加个max-width: 1200px; margin: 0 auto;，就能让它居中且不超宽，完全不影响响应式效果。

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