flex布局与多行文本溢出显示

一般使用flex布局：
如果是横向的，就不加宽度，不然超出后默认会横向压缩
如果是纵向的，就不加高度，不然超出后默认会纵向压缩

但是，你也可以使用 flex-shrink这个属性来控制，如果空间不足的时候，不让它自动压缩。
flex-shrink默认是1，表示空间不足的时候自动进行压缩；设置为0的时候，表示空间不足时，不让它进行压缩。

相对应的属性flex-grow是控制剩余空间的，默认是0；表示如果存在剩余空间，也不进行放大flex项目。

为什么会写这个？
因为再写项目的时候，有控制文字两行溢出显示的。
本来两行文本溢出的css是这样的：

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

文字上方的图片与文字在一个flex容器中，而且对这个flex容器设置了固定高度。
其中有个手机，两行文字有一部分被遮住，使用高度与行高控制也达不到设计稿上的样式（高度是行高的两倍）。

去掉flex容器的高度后，就能正常显示；

或者设置文字这个flex项目的flex-shrink属性的值为0也能正常显示。