滚动FlexBox内部元素背景截断：如何让子元素占满父容器高度？

这个问题我之前也碰到过，核心原因是当你给flex容器（.container）设置固定高度+overflow-y: scroll后，flex子元素（.sidebar和.main）的高度会被限制在容器的可见高度（也就是.wrapper的200px），而不会随着滚动内容的高度自动延伸，导致滚动后背景“断档”。

这里有两个靠谱的解决方案，你可以根据需求选：

方案一：改用Grid布局（最省心） #

Grid布局天生就能让列元素自动匹配最高列的高度，完美解决这个问题。只需要修改.container的样式：

.wrapper { 
  height: 200px; 
  /* 保持固定高度，不滚动 */
}
.container { 
  display: grid; /* 替换flex为grid */
  grid-template-columns: auto 1fr; /* sidebar宽度自适应，main占剩余空间 */
  height: 100%; 
  overflow-y: scroll; 
}
.sidebar { background: orange; }
.main { background: grey; }
body { margin: 0 }

这样不管.sidebar的内容有多长，.main都会自动匹配它的高度，两者的背景都会延伸到滚动内容的最底部，滚动时也不会出现背景缺失的情况。

方案二：保留Flex布局，调整子元素样式 #

如果你一定要用Flex布局，可以给两个子元素设置min-height: 100%，同时把它们改成flex容器，让内部内容能正常排列：

.wrapper { 
  height: 200px; 
}
.container { 
  display: flex; 
  flex-direction: row; 
  height: 100%; 
  overflow-y: scroll; 
}
.sidebar { 
  background: orange; 
  min-height: 100%; 
  display: flex;
  flex-direction: column;
}
.main { 
  flex: 1; 
  background: grey; 
  min-height: 100%; 
  display: flex;
  flex-direction: column;
}
body { margin: 0 }

这个方法的原理是强制子元素高度至少和容器可见高度一致，同时通过内部flex布局避免内容溢出导致的背景断裂问题。

你可以直接把上面的代码替换原来的样式，就能看到效果了～

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