如何使用Flexbox实现侧边栏高度拉伸至父元素高度？

我明白你折腾了不少复杂方法都没搞定这个自适应高度的问题，Flexbox确实是这类布局的绝佳方案，咱们来一步步解决你的需求：

核心思路 #

我们需要让页面的根容器占满整个浏览器视口高度，通过垂直方向的Flex布局，让红色菜单自动填充Content区域之外的剩余空间，同时保证Content替换任意内容时，菜单依然能稳稳延伸到屏幕底部，且无多余滚动条。

具体实现代码 #

/* 重置默认边距，让根容器占满视口高度 */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Content区域：高度由自身内容决定，不会被压缩 */
.content {
  flex-shrink: 0;
  padding: 1rem;
  background: #f5f5f5;
}

/* 红色菜单：自动填充剩余垂直空间 */
.menu {
  flex: 1;
  background: #ff4444;
  padding: 1rem;
  overflow: hidden; /* 移除滚动条，若菜单内容过多需滚动可改为overflow-y: auto */
}

关键代码解释 #

1. body设置height: 100vh：让页面容器直接占满整个浏览器视口高度，这是自适应布局的基础。
2. display: flex; flex-direction: column：将Content和菜单设置为垂直排列的Flex项，保证它们按上下顺序布局。
3. content的flex-shrink: 0：确保Content区域的高度完全由自身内容决定，不会被菜单挤压缩小，不管你替换成什么内容，它的高度都会自适应调整。
4. menu的flex: 1：这是实现自适应的核心，它会让菜单自动占据Content下方所有剩余的垂直空间，刚好延伸到屏幕底部。
5. overflow: hidden：直接移除滚动条，如果菜单内内容过多需要保留滚动功能，可将该属性改为overflow-y: auto，这样既不会出现多余滚动条，又能在内容超出时滚动查看。

这样调整后，红色菜单会固定在Content下方，自动延伸到屏幕底部，而且不管Content替换成什么内容，这个自适应效果都能稳定生效。

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