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>

诸君有用且点赞