问题描述：当flex子元素(或flex子元素里的子元素）宽度过大时，设置flex：1后flex子元素还是超出flex父元素，并不能限制其长度。
问题原因：flex是flex-grow、flex-shrink和flex-basis的缩写，其中flex-grow指定的是容器中剩余空间的多少应该分配给子元素。而现在子元素本身就超出了容器，根本没有剩余空间可分配，所以flex：1不生效。
解决方法：设置子元素width：0；强行让子元素宽度为0，然后flex：1就可以生效了（注：在firefox浏览器时要设置min-width：0）.如果子元素有自己的宽度可以设置overflow不为visible
参考链接：https://juejin.cn/post/6974356682574921765

复习flex的三个属性：flex-grow、flex-shrink和flex-basis

首先我们来看下在MDN中对各自的定义

flex-grow：这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

flex-shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。属性只能是一个 。负值是不被允许的。（值越大，缩小的比例越大）

flex-basis：指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.（值可以为固定关键词，如：fill、max-content等，也可以直接写单位，如：10em、3px、60%，auto等，百分数是相当于其父弹性盒容器的百分数）

所以这里的逻辑是先根据flex-basis属性获得flex 元素的宽度，没有的话使用width，然后计算所有flex 元素的宽度