如何防止缩小Chrome标签页时div侧边栏重叠主内容

问题根源 #

1. 红色侧边栏使用了绝对定位（position: absolute）并固定right: 319px，窗口缩小时无法跟随父容器宽度自适应调整位置
2. 主内容区.articles（786px）和侧边栏（260px）的固定宽度总和超过父容器.content的980px宽度，本身存在溢出问题
3. 未设置响应式适配逻辑，小窗口下元素无法自动调整布局
4. 页面viewport标签存在拼写错误：width=devive-width应为width=device-width，这会影响移动端布局正确性

修复方案（用Flexbox实现自适应布局） #

Flexbox是现代CSS布局方案，能轻松解决元素重叠和自适应问题，具体修改如下：

1. 修正viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修改核心CSS代码

替换原CSS中相关部分为以下代码：

/* 让内容容器自适应窗口宽度，最大宽度保持980px */
.content {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px; /* 增加左右内边距，避免小窗口下内容贴边 */
  box-sizing: border-box; /* 内边距计入宽度 */
}

/* 移除侧边栏的绝对定位，改为Flex布局子元素 */
.sidebar {
  background-color: red;
  width: 260px;
  min-height: 100px;
  margin-left: 20px; /* 和主内容区保持间距 */
}

/* 把主内容容器改为Flex容器，实现两栏布局 */
#main .content {
  display: flex;
  flex-wrap: wrap; /* 小窗口下自动换行 */
  align-items: flex-start; /* 顶部对齐 */
}

/* 主内容区自动占满剩余空间，设置最小宽度避免过窄 */
#main .articles {
  flex: 1;
  min-width: 300px;
  background: white;
}

3. 可选：调整HTML结构

把侧边栏移到articles前面，小窗口下侧边栏会优先占满一行（按需调整）：

<div id="main">
  <div class="content">
    <div class="sidebar"></div>
    <div class="articles">
      <!-- 文章内容 -->
    </div>
    <div class="clearfix"></div>
  </div>
</div>

效果说明 #

• 窗口宽度足够时，主内容区和侧边栏保持两栏布局，无重叠
• 窗口缩小时，侧边栏自动换行到主内容区下方，避免重叠
• 所有容器自适应窗口宽度，在不同设备上都有良好显示效果

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