问题描述
使用弹力规划的情况下，肯定会有遇到分派子元素空间问题，比如flex:1平分
但使用时有的时候会发觉，当在其中某一子元素内容太长时，会挤压成型别的子元素及其父元素空间，并没按大家设定的期望占比去进行分割
正常情况下
具体内容超过
html
<div class="flex">
<div class="left">111111111</div>
<div class="right">
<div class="right-content">
adasdasdasdadasdasdasdasdasadasdasdasdadasdasadasdasdasdadasdasdasdasdasadasdasdasdadasdas
</div>
</div>
</div>
css
.flex {
width: 300px;
height: 100px;
display: flex;
}
.left {
flex: 1;
background-color: aqua;
}
.right {
flex: 1;
background-color: red;
}
能够看见，不但不按照大家预估分配室内空间，还远远超过了父元素的总体总宽，这样毫无疑问是不合理的，严重影响网页布局
解决方法一（不成功）
flex:1 具体仅仅缩写
等同于
flex-grow: 1; 可用空间中加入比例，初始值为0，表明子元素不增加尺寸，设为1时，子元素会尽可能的添充可用空间，若有好几个子元素进行分配可用空间
flex-shrink: 1; 子元素在内存不足时减少的占比。初始值为1，表明子元素将变小以满足器皿。当设为0时，表明子元素不容易变小，假如有好几个子元素增设了 flex-shrink，则他们将按比例缩小
flex-basis: 0%; 子元素在分派不必要室内空间以前占据的空间大小。初始值为auto，表明子元素大小对其具体内容确定。当设为一个长短值后，表明子元素在分派不必要室内空间以前占有的空间大小。假如有好几个子元素增设了 flex-basis，则他们将根据设定的尺寸进行分割
能够留意到flex-shrink这一设定变小特性，那我们设置一下为0使它不变小不就行了吗
.left {
flex: 0 0 50%;
background-color: aqua;
}
.right {
flex: 0 0 50%;
background-color: red;
}
能够看见，left左侧的确依照预估没被变小，可是right却把远远超过了本身总宽
解决方法二（取得成功）
细心了解弹力合理布局发觉，针对flex属性的理解有一个误区，大家在为子元素应用flex特性时，理所当然的觉得它会依照比例分配父元素的空间大小，但实际上并非这般
仔细检查flex-grow属性的描述不难看出，弹力规划的flex特性仅仅分派可用空间
可用空间：flex 容器尺寸减掉全部 flex 项大小加在一起大小。假如每一个哥们新项目都是有同样的 flex-grow 指数，那样每一个项目将可用空间按同样比例分配，否则就会针对不同的 flex-grow 界定比例进行分割。
MDN连接
当时看到这里也不难理解了，flex特性仅仅 对父元素的不必要室内空间按什么占比去分派，并非按我们自己的理解意思为固定不动分派比例，不容易对联原素本来具体具体内容总宽予以处理，就和flex-basis特性本身就是设定在分派可用空间以前，现阶段子元素的具体空间大小
那样说到这里就有些纳闷了，计划方案一中的flex-basis特性并不是应用了没有，为什么没什么效果
flex: 0 0 50%;，严禁了子元素放大及其分派室内空间，立即依照最后一个主要参数flex-basis特性分别分派固定不动50%
左侧元素left其实就是通过了的，右侧right为什么就不能用了呢，并不是早已设定好总宽了没有
浏览器默认为flex容器子元素增设了 "min-width: auto;min-height: auto"，这就意味着子元素的最小宽度高度不可以低于内容宽度高度。
因此才会产生以上状况，我们该如何处理呢，大家直接将这一默认设置特性覆盖，设为min-width: 0，即便内容为空或是总宽不大，也可以使flex子原素在flex容器里准确地合理布局
处理编码如下所示
.flex {
width: 300px;
height: 100px;
display: flex;
}
.left {
flex: 0 0 50%;
background-color: aqua;
}
.right {
flex: 0 0 50%;
background-color: red;
min-width: 0;
min-height: 0;
overflow: hidden;
word-break: break-all;
}
如果采用flex:1;让弹力合理布局分派可用空间，那样应用width:0或是min-width: 0都能实现，即把头原素室内空间都设为0，由flex来分派剩下全部室内空间