CSS中模态框内容区域在特定分辨率下意外收缩问题排查

问题根源 #

布局崩溃的核心原因是输入框的固定最小宽度与模态框在中等屏幕下的列宽冲突：

• .input设置了min-width: 20em，在900px-1200px的屏幕区间内，.modal-body-md的宽度为屏幕的35%，扣除内边距和列间距后，两列布局的每列可用宽度远小于20em，输入框会强行撑破列容器，导致整个模态框布局溢出变形。
• .form-field的justify-content: start会让输入框保持最小宽度，不会自动收缩适配列宽，进一步加剧了溢出问题。

修复方案 #

可以通过以下两种方式解决，按需选择：

方案1：针对中等屏幕调整输入框的最小宽度

给模态框内的输入框添加媒体查询，在900px-1200px区间内适配列宽：

@media (min-width: 900px) and (max-width: 1200px) {
  .modal-body-md .modal-content input {
    min-width: 100%; /* 让输入框占满列宽，自动收缩 */
    box-sizing: border-box; /* 确保内边距不会额外增加宽度 */
  }
}

方案2：提前切换两列布局为单列

如果希望在中等屏幕下直接用单列布局避免冲突，修改.two-cols-one-one的媒体查询阈值：

.two-cols-one-one {
  /* 原有样式不变 */
  @media (max-width: 1200px) { /* 将max-width从900px改为1200px */
    grid-template-columns: 1fr;
    grid-template-areas:
       "col-left"
       "col-right";
  }
}

额外优化建议

• 给.form-field添加box-sizing: border-box，避免内边距导致元素宽度溢出：

.form-field {
  display: grid;
  justify-content: start;
  align-items: start;
  padding: 0.3em 0.5em;
  box-sizing: border-box; /* 添加这一行 */
}

• 给.modal-body-md添加max-width限制，避免大屏幕下模态框过宽：

.modal-body-md {
  /* 原有样式不变 */
  max-width: 600px; /* 根据需求设置合适的最大宽度 */
}

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