记一个flex布局，挤占侧栏的问题与解决

背景

在做侧栏布局时，使用了flex布局，并设置了侧栏aside为定宽，主体main为flex:1。但是当main的子元素过宽时，会侵占aside的空间。以下是代码与复现：
image

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width: 500px;
      height: 300px;
      border: 2px solid #333;
    }

    .aside {
      width: 150px;
      background: #e1e1e1;
    }

    .main {
      flex: 1;
      background: #f5f5f5;
    }

    /* 添加一个很宽的内容来演示溢出 */
    .wide-content {
      width: 400px;
      height: 100px;
      background: #ff9999;
      margin: 10px;
    }

    /* 取消注释下面的代码来修复溢出问题 */
    /*.main {
      overflow: hidden;
    }*/
  </style>
</head>
<body>
  预期：
  <div class="container">
    <div class="aside">
      侧边栏内容
    </div>
    <div class="main">
        子组件
    </div>
  </div>
  实际：
  <div class="container">
    <div class="aside">
      侧边栏内容
    </div>
    <div class="main">
      <div class="wide-content">
        这是一个很宽的内容，会溢出并挤占侧边栏空间
      </div>
    </div>
  </div>
</body>
</html>

解决方案

为.main添加overflow:hidden;即可

原因

在CSS盒模型中，有一个BFC（Block Formatting Context）的概念，它属于CSS视觉格式化模型（Visual Formatting Model）的一部分。CSS视觉格式化模型定义了浏览器如何处理文档树并显示。
格式化上下文有几种类型：

  • BFC：块级格式化上下文
  • IFC：行内格式化上下文
  • FFC：弹性格式化上下文
  • GFC：网格格式化上下文
    在此例中，当.main添加了overflow:hidden后，.main将会变为BFC，BFC是一个独立的渲染区域，内外部元素隔离，不会影响到外部格局，所以子元素不会撑开父元素。
posted @ 2025-04-22 11:37  南山有榛  阅读(27)  评论(0)    收藏  举报