【HTML中flex属性】设置flex属性时⼦元素宽度超出⽗元素场景： 元素分为左右两块，左边元素定宽，右边元素⾃动充满屏幕。
设置右边元素flex：1，当右边元素宽度超过⽗元素时，会造成右边宽度溢出。
原样式：
.container {
width:400px;
display:flex;
}html的flex布局
.left {
width:240px;
}
.right {
flex:1;
}
右边多设置⼀个width:0或overflow:hiddlen后样式正常。
.container {
display:flex;
}
.left {
width:240px;
}
.
right {
width:0;
flex:1;
}
5.16更新：
为什么设置flex: 1可以实现宽度⾃适应？
这与flex属性的赋值语法有关，CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可⽤空间。这是⼀个简写属性，⽤来设置flex-grow, flex-shrink 与 flex-basis。具体的语法规则可以参考
三种属性⽐较好理解的分析参考：
flex: 1 = flex: 1 1 auto = flex-grow: 1
flex-grow属性⽤于⽠分⽗容器的剩余空间，在上⾯例⼦中，只有right设置了flex：1，所以它占了剩余空间的所有⽐例，实现了宽度的⾃适应。
对于为什么⼦元素宽度会溢出的问题，⽹上查了⼀下只说是弹性布局的特性以及⽗元素没有⼀个固定的长度进⾏限制这两个因素造成的，具体原因还不太清楚。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。