嵌套Div滚动与Grid布局问题：指定子Div滚动需求

这个问题我太熟悉了！你现在遇到的是overflow: auto生效的核心条件问题——元素必须有明确的高度约束，如果元素高度是默认的auto，它会跟着内容无限撑开，自然不会触发滚动条。

问题根源分析 #

你的.container用了Grid布局，第三行是auto，这意味着.con会被里面的内容（包括.b的大量文本）完全撑开。而.b没有任何高度限制，所以overflow: auto根本起不了作用。我们需要做的是让.b获得一个固定的可用高度，同时让.a保持可见，不被滚动影响。

解决方案代码 #

html, body { 
  height: 100%; 
  margin: 0; /* 去掉默认margin，避免页面出现多余滚动条 */
}
.container { 
  height: 100%; 
  display: grid; 
  grid-template-rows: min-content min-content 1fr; /* 第三行用1fr更准确，占剩余全部空间 */
  border: 1px solid red; 
}
.sub { border: 1px solid blue; }
.con { 
  border: 1px solid green; 
  display: flex; /* 用flex布局分配内部空间 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%; /* 让.con占满Grid第三行的全部空间 */
}
.a { 
  background-color: yellow; 
  flex-shrink: 0; /* 确保.a不会被压缩，始终保持原有高度 */
}
.b { 
  background-color: orange; 
  flex: 1; /* 占满.con剩下的所有可用空间 */
  overflow: auto; /* 内容超出时显示滚动条 */
}

<div class="container">
  <div class="head"> abc </div>
  <div class="sub"> def<br> efg </div>
  <div class="con">
    <div class="a"> fixed position </div>
    <div class="b"> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123 </div>
  </div>
</div>

关键步骤解释 #

1. 调整Grid第三行属性：把auto改成1fr，明确让第三行占满容器剩余的所有空间，避免.con被内容无限制撑开。
2. 给.con添加Flex布局：通过flex-direction: column让.a和.b垂直排列，利用弹性布局的空间分配能力，精准控制子元素的占比。
3. 固定.a的高度：flex-shrink: 0确保.a始终保持自身高度，不会被.b挤压变形。
4. 让.b占满剩余空间：flex: 1让.b自动填充.con剩下的所有空间，此时.b有了明确的高度约束，overflow: auto就能正常触发滚动了。

这样调整后，.b会在内容超出时显示滚动条，而.a、.head和.sub都会始终保持可见，完全符合你的需求～

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