弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题

文字长度过长显示省略号的样式设置方法众所周知：

<!-- 单行显示省略号 -->
.css {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<!-- 多行显示省略号 -->
.css2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	overflow: hidden;
}

然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。

经过搜索排查分析，发现是display: flex;影响的white-space: nowrap;会影响flex布局下未设定宽度的元素，所以给设置了display: flex;的父元素设置一下min-width:0即可解决问题。

代码如下：

.item-content-container { //父
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    padding: 32rpx 0 32rpx 0rpx;
    border-bottom: 1px solid $color_border_divider;
    min-width: 0;  //处理因white-space: nowrap  导致宽度失效的问题
        
    .content { //子
        // display: flex;  //这里需要注释掉
        box-sizing: border-box;
        font-size: $text_size_24;
        color: $color_text_primary;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

本文参考：https://blog.csdn.net/Flowering_Vivian/article/details/110377201