CSS Grid问题：如何避免动态网格单元格撑爆整个网格容器？

你的问题核心在于Grid容器的高度未被正确约束，以及Grid单元格默认会自适应内容高度，导致顶部消息容器被内容撑开，挤走底部输入栏。以下是无需硬编码像素（除输入栏固定高度外）的解决方案：

关键修改步骤 #

1. 修复高度链，让Grid容器的height:100%生效 #

CSS中百分比高度依赖父元素有明确高度值，先给根元素和body设置高度，确保#chat的高度设置能生效：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 强制Grid单元格遵守高度分配 #

给顶部消息容器添加min-height:0，打破Grid默认的内容自适应行为，配合overflow:auto实现滚动：

#chat-read {
  grid-area: 1 / 1;
  overflow: auto; /* 仅内容溢出时显示滚动条，体验更友好 */
  min-height: 0; /* 关键：允许单元格高度小于内容高度 */
}

3. 确保消息列表容器填充父元素 #

调整消息列表样式，让它在顶部容器内正确填充并支持溢出滚动：

#chat-message-list {
  display: flex;
  flex-direction: column; /* 假设消息纵向排列，按需调整 */
  height: 100%;
  gap: 12px; /* 可选：添加消息间的间距 */
}

完整修改后的代码 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#chat {
  display: grid;
  grid-template-rows: 1fr 64px;
  height: 100%;
}

#chat-read {
  grid-area: 1 / 1;
  overflow: auto;
  min-height: 0;
  padding: 16px; /* 可选：添加内边距优化视觉 */
}

#chat-compose {
  grid-area: 2 / 1;
  height: 64px; /* 明确固定高度 */
  padding: 0 16px; /* 可选：添加内边距 */
}

#chat-message-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

<div id="chat">
  <div id="chat-read">
    <div id="chat-message-list">
      <!-- 动态消息内容 -->
    </div>
  </div>
  <div id="chat-compose">
    <!-- 输入栏内容 -->
  </div>
</div>

核心原理说明 #

• min-height:0：Grid单元格默认会扩展以容纳内容，这个属性强制单元格遵守1fr分配的高度，允许内容溢出滚动。
• 完整高度链：从html到body再到#chat的高度设置，确保1fr能正确计算为父容器的剩余空间。

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