网格布局下.content适配视口及指定元素溢出实现问题

关键修改点（仅针对.content及其子元素） #

• 给.content添加display: grid，使其子元素自动填充可用空间
• 给.container-blueprint设置height: 100%，确保它撑满.content的高度，让内部Grid的1fr行能正确计算剩余空间

修改后的核心CSS代码 #

.content {
  grid-area: 3/2/4/3;
  display: grid; /* 新增 */
}

.container-blueprint {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "SectionOne SectionTwo SectionThree"
    "SectionOne SectionTwo SectionThree"
    "SectionOne SectionTwo SectionThree";
  height: 100%; /* 新增 */
}

完整修改后CSS（含原有样式） #

.container-blueprint {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "SectionOne SectionTwo SectionThree"
    "SectionOne SectionTwo SectionThree"
    "SectionOne SectionTwo SectionThree";
  height: 100%; /* 新增 */
}

.SectionOne {
  overflow-y: auto;
  grid-area: SectionOne;
  width: 300px;
}

.SectionTwo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr min-content;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "SectionTwoTop SectionTwoTop SectionTwoTop"
    "SectionTwoCenter SectionTwoCenter SectionTwoCenter"
    "SectionTwoBottom SectionTwoBottom SectionTwoBottom";
  grid-area: SectionTwo;
}

.SectionThree {
  overflow-y: auto;
  grid-area: SectionThree;
  width: 100px;
}

.SectionTwoTop {
  height: 100px;
  grid-area: SectionTwoTop;
}

.SectionTwoCenter {
  overflow-y: auto;
  grid-area: SectionTwoCenter;
}

.SectionTwoBottom {
  height: 100px;
  grid-area: SectionTwoBottom;
}

/* Other styles. */

html,
body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: min-content min-content 1fr min-content;
}

.container-blueprint * {
  border: 1px solid red;
  position: relative;
}

.header {
  grid-area: 1/1/2/3;
}

.nav {
  grid-area: 2/2/3/3;
}

.sidebar {
  grid-area: 2/1/4/2;
}

.content {
  grid-area: 3/2/4/3;
  display: grid; /* 新增 */
}

.footer {
  grid-area: 4/1/5/3;
}

原理说明 #

• 你的body已采用Grid布局，将.content分配到1fr行中，这意味着.content会自动占据header、nav、sidebar之外的剩余视口空间，footer固定在底部。
• 给.content设置display: grid后，子元素.container-blueprint会默认填充整个.content的高度；加上height: 100%确保内部嵌套Grid能基于这个高度分配行高。
• .SectionTwo的grid-template-rows: min-content 1fr min-content会让SectionTwoCenter占据上下固定高度区块之外的剩余空间，内容超出时overflow-y: auto触发纵向滚动。

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