土旦：关于display:flex碰上white-space nowrap 影响布局的问题

背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响

---

 

解决办法，父div设置min-width:0即可

flex: 1;

min-width: 0; 
 

---

 

w3c上面是这样说的

by default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).

因为设置了white-space:nowrap，所以content没法收缩了，设置0后就有了固定尺寸就可以收缩了

---

 

记录走过的路，踩过的坑，互勉。

　　前端交流群：87709616

有不同意见的可以留言，我们一起讨论。

转载至：