flex：1的容器会被内部元素撑开的解决方法

父元素flex:1时高度被子元素撑开的解决方法

<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } .a {width: 100px;} 正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: 0;，就可以解决 ...

在使用 el-table 组件时，父级容器设置flex:1布局，但是宽/高会被整体内容撑开，导致布局失调。

flxe弹性布局

在火狐和safria中flex排列和writing-mode失效的问题解决（火狐是writing-mode失效问题，safria是没有writing-mode只能用flex去写）

设置flex:1不生效,高度还是会超出父元素,如何解决?

弹性盒子Flex Box滚动条原理，避免被撑开，永不失效 在HTML中，要实现区域内容的滚动，只需要设定好元素的宽度和高度，然后设置CSS属性overflow 为auto或者scroll： 在Flex box布局中，有时我们内容的宽度和高度是可变的，无法确定下来，这时候设置滚动条，可能会失效。只要记住几个关键要素，就可以解决这个问题。 1、清楚的知道当前元素的flex flow 如果要设置水平滚动条，那么父元素的flex-flow要设置为row，如果要设置纵向滚动条，那么父元素的fl..

这个问题主要是 flex-grow: 1 引起的，这个概念可以搜索“Intrinsic and Extrinsic Sizing”以深入了解浏览器对于内容大小的计算机制逻辑。简单来说，就是 flex-grow: 1 启用时，该元素会无限“贪婪”的吃掉剩余的空间，并且尽可能的多容纳内部元素，他会不断向上检查，直到碰到了一个“固定大小”的元素，才会停止“贪婪”。

如果是横向 就在父元素中有使用flex：1的地方加上 min-width:0, 如果不行，就父元素的依次往上加。如果是纵向 就在父元素中有使用flex：1的地方加上 min-height:0，如果不行，就父元素的依次往上。

CSS flex纵向布局时flex：1没有自动撑开项目？

flex横向排列不换行显示,内容自动撑开

就和图片中的效果一样。容器大小是不确定的，要根据内容来决定。但是被内容撑开，使用word-wrap:break-word;强制换行文字和字母无效 这时将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开 width: 0; flex: 1 如果内容大小确定， flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 ...

1定高后，2自适应；直接给2flex:1;如果子元素过多，会被子元素撑开，随便加一个高度就好了。

在设置flex=1的元素上再设置个overflex：hidden即可 代表在该元素内部进行计算