CSS Grid同一行单个单元格使用max-content其余自适应拉伸如何实现？

完全不用放弃Grid布局，只需修改少量配置即可实现需求。你遇到的问题是触发了Grid布局的默认最小尺寸规则：默认网格单元格的最小尺寸是auto，内容溢出时会优先撑开单元格而非收缩，且跨行列的单元格内容会参与所有跨域行列的尺寸计算。

修改点 #

• 先修正原代码的语法错误：#cell-bottom-right的结尾括号写反，需将{改为}
• 给网格容器的第二行高度改为minmax(0, 350px)，显式允许第二行高度在内容不足时收缩，打破默认auto最小尺寸限制
• 给左侧跨两行的#cell-left添加min-height: 0属性，允许纵向内容溢出时触发滚动而非撑开网格
• 如果需要避免右侧上单元格内容过多时撑开第一行，可额外给#cell-top-right添加min-height: 0属性

修改后的完整代码 #

#grid-container {
   grid-template-rows: minmax(42px, max-content) minmax(0, 350px);
   grid-template-columns: 312px 650px;
}
  
#cell-left {
   grid-row: 1 / 3;
   grid-column: 1;
   overflow-y: auto;
   min-height: 0;
}

#cell-top-right {
   grid-row: 1;
   grid-column: 2;
}

#cell-bottom-right {
   grid-row: 2;
   grid-column: 2;
}

修改后第一行的高度会完全由内容决定，最低42px，左侧内容超出两行总高度时会自动出现纵向滚动条，不会撑开整体网格布局。

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