【CSS】解决父元素display:flex布局下的子元素宽度无效问题

因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置）

flex-shrink: 0;
width: 100rpx;

这样就可以啦~快去试试吧~

 

 

 

另外遇到的一个问题：

在 flex:1 下的元素中，如果文字很长就会超出容器，而不是呆在设置好的动态剩余的空间中。。。

解决办法：在 flex:1 下的元素下添加样式，可达到效果：

方法一：

overflow: hidden;

方法二：

width: 0;