如何用Flexbox让指定div占满宽度使下一个div换行（不置于侧边栏下）

需求说明 #

要实现以下布局效果：

• 红色区块（.one）作为侧边栏，占左侧20%宽度、容器全高
• 绿色区块（.two）作为页眉，放在红色区块右侧顶部
• 蓝色区块（.three）放在绿色区块下方，且只在红色区块的右侧区域，不能跑到红色区块的下方

现有代码如下：

HTML代码 #

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
</div> 

CSS代码 #

.wrap {
  display: flex;
  flex-wrap: wrap;
  height: 20rem;
}

.one {
  background-color: red;
  width: 20%;
  height: 100%;
}

.two {
  background-color: green;
  height: 3rem;
  flex: 1;
}

.three {
  width: 10rem;
  height: 10rem;
  background-color: blue;
}

两种可行解决方案 #

方案1：调整HTML结构（推荐） #

把绿色和蓝色区块放到同一个容器里，通过嵌套flex布局明确区分侧边栏和主内容区，结构更清晰：

修改后的HTML

<div class="wrap">
     <div class="one"></div>
     <div class="main-content">
         <div class="two"></div>
         <div class="three"></div>
     </div>
</div> 

修改后的CSS

.wrap {
  display: flex;
  height: 20rem;
}

.one {
  background-color: red;
  width: 20%;
  height: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.two {
  background-color: green;
  height: 3rem;
}

.three {
  width: 10rem;
  height: 10rem;
  background-color: blue;
  /* 要是想让蓝色块占满右侧宽度，加这行：flex: 1; */
}

方案2：不改动HTML，仅调整CSS #

通过margin-left: auto把绿色和蓝色块推到右侧，同时固定侧边栏的宽度不被压缩：

修改后的CSS

.wrap {
  display: flex;
  flex-wrap: wrap;
  height: 20rem;
}

.one {
  background-color: red;
  width: 20%;
  height: 100%;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
}

.two {
  background-color: green;
  height: 3rem;
  flex: 1;
  margin-left: auto; /* 推到右侧 */
}

.three {
  width: 10rem;
  height: 10rem;
  background-color: blue;
  margin-left: auto; /* 保持在右侧区域 */
  /* 要占满右侧宽度的话，替换width为 flex: 1; */
}

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