flex 布局比较容易犯的错误出现边界超出的预想的情况

flex 布局比较容易犯的错误
出现边界超出的预想的情况

如图
在这里插入图片描述
当使用flex布局时，设置flex:1 或者是flex:x 时如果没有多层嵌套的flex布局，内容超出flex：1规定的后，仍然会撑大融器
在flex:1 处设置 overflow:hidden 即可超出后不显示

但是：当有多层嵌套的flex ；第一层的flex ：1 很容易忽略掉 overflow:hidden ,这时问题就来了–当嵌套子元素的内容超出设置的后–无论如何在子元素上加overflow:hidden 都不起作用–除非使用width为固定的

这时就应该看看是不是第一层flex布局没有加

1.看代码

css

.parent {
  display: flex;
  
}
.sub1 {
  display: flex;
  flex: 1;
  background: #f6cb00;
  overflow: hidden;
  /* overflow: hidden; */
}

.sub2 {
  flex: 1;
  background: red;
}
.sub3 {
  display: flex;
  flex: 1;
  background: #f6cb00;

}

页面

  <div class="parent">
      <div class="sub1">
         1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class="sub2">2</div>
    </div>
    <div class="parent"  style="display: flex; margin-top: 80px">
      <div class="sub3">
         <div style="flex:1;overflow:hidden">
          1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
         </div>
      </div>
      <div class="sub2">2</div>
    </div>