如何设置页面内容overflow:auto实现局部滚动，整体无滚动且无需固定像素值

修复方案 #

你当前代码的核心问题是 .content容器没有设置为flex列布局，导致它的子元素.scrollableContent上设置的flex: 1 1 auto属性不生效，无法自动填充剩余高度，也不会触发滚动。

你只需要修改两处CSS即可：

1. 给.content添加flex布局属性，让它内部元素可以按高度分配空间
2. 可选：把.box的高度改为100vh，减少对html/body高度继承的依赖，适配性更强

修改后的完整CSS如下：

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

.box {
  display: flex;
  flex-flow: column;
  height: 100vh; /* 也可以保留原来的height:100%，100vh适配性更好 */
}

.row {
  border: 1px dotted grey;
  box-sizing: border-box; /* 防止边框撑高容器，可选补充 */
}

.header {
  flex: 0 1 auto;
  background-color:grey;
}

.content {
  flex: 1 1 auto;
  background-color:#C4C4C4;
  display: flex; /* 新增：将content设为flex容器 */
  flex-direction: column; /* 新增：内部元素垂直排列 */
  min-height: 0; /* 新增：防止flex子元素高度溢出父容器，兼容部分浏览器 */
}

.scrollableContent {
  flex: 1 1 auto;
  background-color:#7D7D7D;
  overflow: auto;
  margin:5px;
}

.item {
  background-color:black;
  color:white;
  margin:5px;
  flex-shrink: 0; /* 新增：防止上方固定内容被压缩 */
}

.footer {
  flex: 0 1 40px;
  background-color:grey;
}

修改后无需改动HTML结构，就能实现预期效果：header和footer固定在页面顶部和底部，中间的长内容区域自动占满剩余高度，内容溢出时仅该区域出现滚动条，全页面不会出现滚动条，也没有使用任何固定像素值限制滚动区域高度。

如果你的项目里使用了mdbootstrap框架，只需要给上面的自定义样式加上更高的优先级（比如选择器前加body，或者加!important），覆盖框架默认的row、flex相关样式即可。

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