【HTML中flex属性】设置flex属性时子元素宽度超出父元素

场景： 元素分为左右两块，左边元素定宽，右边元素自动充满屏幕。

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。

原样式：

.container {
	  width:400px;
      display: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。具体的语法规则可以参考MDN

三种属性比较好理解的分析参考：关于 Flex 中的 flex-grow、flex-shrink、flex-basis

flex: 1 = flex: 1 1 auto = flex-grow: 1

flex-grow属性用于瓜分父容器的剩余空间，在上面例子中，只有right设置了flex：1，所以它占了剩余空间的所有比例，实现了宽度的自适应。

对于为什么子元素宽度会溢出的问题，网上查了一下只说是弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素造成的，具体原因还不太清楚。。