flex布局中子元素超长溢出解决显示...

一、问题描述：父级元素添加display: flex;，子元素超长，用max-width限制不起作用，如图

企业微信截图_1717574733931.png

二、需求是：“明细明细明细明细明细明细明细明细”超长显示“明细明细明细明...”

三、方案：给父元素添加样式：min-width: 0; 取消浏览器默认设置

<div class="con-info">
 <image class="img" src="/img1.png"></image>
    <div class="count">
        <count-to :start-val="0" end-val="1" :duration="2600" />
        <div class="description">哈哈哈哈哈哈哈哈哈哈哈哈</div>
    </div>
</div>
.con-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.count {
    flex: 1; // flex布局分配空间
    min-width: 0; // 取消浏览器默认设置
    display: flex;
    align-items: center;
}
.description {
    max-width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.title-image {
    max-width: 30px;
    height: 30px;
}

实现效果如下，标题字数超出，自动隐藏

企业微信截图_17175750715936.png