display:flex布局下white-space:nowrap失效问题解决

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

h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

然而有一次，我在项目中用到white-space: nowrap的时候，发现它失效了，我的项目是flex布局，宽度自适应的部分，white-space: nowrap撑开了内容区的长度，省略号是显示了，但是父元素的自适应宽度完全不对了。

页面部分布局如下：

<template><div class="parent"><el-col :span="6" v-for="item in list" :key="item.id"><h3>{{item.title }}</h3>......</el-col></div></template>

样式如下：

.parent {flex: auto;min-height: 100vh;display: flex;flex-direction: column;}.parent h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}

查了一下才知道，原来是因为display:flex影响的，white-space:nowrap会影响flex布局下未设定宽度的元素，所以给设置了display:flex的父元素设置一下min-width: 0;即可解决问题。

.parent {flex: auto;min-height: 100vh;display: flex;flex-direction: column;min-width: 0;}