在实际开发中，。flex布局设置item的flex:1，实际的表现是这样的：

• 当剩余空间大于item的内容宽度的时候，item实际宽度为剩余空间的宽度
• 当剩余空间小于item的内容宽度的时候，item会溢出

但是item并没有按照我们预期的去填充剩余空间，我们想要的是当item内容宽度大于剩余空间的时候，item宽度就等于剩余空间宽度，而不是溢出。

我们以横向布局说明问题，纵向布局原理一样。

Facebook为了达到这个预期，用到了CSS：

{flex: 1;  width: 0;}

{flex: 1;  width: 0;}

这里设置了width:0，但是div仍然有宽度。对于这个问题，一开始的时候，我们会感觉有点奇怪。

下面是我的个人理解。

在使用了flex:1属性的item中，因为flex:1是以下属性的缩写：

• flex-grow:1
• flex-shrink:1
• flex-basis: 0

flex-shrink机制 ​

本来预期flex-shrink:1会使得item宽度缩小为剩余空间宽度，但是由于flex-shrink有个最小宽度的机制，即缩小到item最小宽度就不会再缩小了。这里有个优先级的问题：

• item最小宽度小于容器宽度，item宽度会缩小到容器剩余宽度
• item最小宽度大于容器宽度，item宽度不会缩小到容器的剩余宽度，而是会等于item最小宽度

对于一个没有设置width或者min-width的flex-item元素，其min-width默认就是内容宽度

flex-grow机制 ​

而对于flex-grow则有最大宽度机制：

• 子项max-width大于容器剩余宽度时，子项会膨胀为剩余空间宽度
• 子项max-width小于容器剩余宽度时，子项会膨胀为子项的max-width

对于一个没有设置width或者max-width的flex-item元素，其max-width默认是无限大 所以默认情况下，子项宽度小于剩余空间时，能直接撑满剩余空间

加上width:0，显式的定义了item的宽度，那么item的最小宽度就不由内容决定，而是由width决定，width:0则min-width默认也会取0。

为了避免溢出，当然也可以改为min-width:0