为何main-container无响应而header其他区块正常？同样式表现不同

一、main-container无法自适应收缩的修复 #

问题原因 #

当前main-container的网格列使用3.5fr 1.5fr，默认情况下fr单位会受网格项内容的最小宽度限制，无法无限收缩；同时父容器header用固定百分比设置行高，限制了main-container的布局弹性，导致视口缩窄时无法和另外两个区块同步适配。

修复代码 #

/* 修改header行高规则，提升布局灵活性 */
header {
  display: grid;
  grid-template-rows: auto auto 1fr; /* 前两行自适应内容，最后一行占剩余空间 */
}

/* 给所有网格列添加minmax(0, fr)，允许列自由收缩 */
.first-header,
.second-header {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr);
  padding: 2em;
}

.main-container {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 1.5fr);
  background-color: aliceblue;
  padding: 2em;
  overflow-x: auto; /* 极端窄视口下允许横向滚动，避免内容溢出页面 */
}

二、header收缩时h2元素消失的修复 #

问题原因 #

h2消失通常是以下原因导致：

• 被媒体查询强制设置为display: none
• 父容器开启overflow: hidden，且h2因white-space: nowrap无法换行，被挤出可视区域
• h2自身未设置最小宽度限制，被容器挤压隐藏

修复代码 #

/* 确保h2自适应容器宽度，不被截断 */
h2 {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0; /* 允许h2跟随容器收缩 */
}

同时检查项目中的媒体查询规则，移除针对h2的不必要display: none设置；如果h2的父容器有overflow: hidden，可根据需求改为overflow: visible或调整容器最小宽度。

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