如何将内容元素适配到侧边栏旁？附现有布局代码问题

问题根源 #

原侧边栏采用了固定定位（fixed），脱离了文档流，导致后续添加的内容容器默认从页面左上角渲染，要么被侧边栏遮挡；如果手动给内容容器加固定的margin-left，又无法随侧边栏宽度或屏幕尺寸变化自适应，出现内容溢出或留白的问题。

解决方案：用Flex布局实现自适应双栏 #

Flex布局能自动分配容器剩余空间，完美适配屏幕缩放，步骤如下：

1. 调整页面结构 #

将侧边栏和内容区域包裹在一个父容器内，结构示例：

<div class="page-wrapper">
  <!-- 原侧边栏代码 -->
  <nav class="sidebar">
    <!-- 侧边栏原有内容 -->
  </nav>
  <!-- 新增的内容区域 -->
  <div class="main-content">Main Page</div>
</div>

2. 修改CSS样式 #

• 父容器设置Flex布局，占满视口高度：

.page-wrapper {
  display: flex;
  min-height: 100vh; /* 保证容器占满屏幕高度 */
}

• 侧边栏禁止压缩，保留原有宽度：

.sidebar {
  flex-shrink: 0; /* 防止侧边栏被内容区域挤压变形 */
  /* 保留原侧边栏的宽度、背景、内边距等样式，移除fixed定位 */
}

• 内容区域自动占据剩余空间：

.main-content {
  flex: 1; /* 自动填充侧边栏以外的所有空间 */
  padding: 1.5rem; /* 可选，添加内边距优化排版 */
  overflow: auto; /* 内容过多时自动出现滚动条 */
  background-color: #f8f9fa; /* 可选，区分内容区域与侧边栏 */
}

3. 适配移动端（可选） #

如果需要移动端适配，可添加媒体查询，在小屏幕下将布局改为纵向排列：

@media (max-width: 768px) {
  .page-wrapper {
    flex-direction: column;
  }
  .sidebar {
    width: 100% !important; /* 侧边栏占满宽度 */
  }
}

这样修改后，内容区域会自动跟随屏幕缩放，始终填充侧边栏以外的剩余空间，不会出现遮挡或溢出问题。

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