当我们得需求如下图所示

一行两个div，宽度都是自适应得。但是右边的div永远全部显示出来，左边的div超出时出现省略号。主要使用flex的下面两个：

flex-grow ：当父级有剩余时，进行填充

flex-shrink：当父级空间不足时用来收缩，当为0时，代表不收缩，全部展示出来

<style>
    ul {
        width: 300px;
        font-size: 14px;
        color: #333;
        list-style: none;
        padding: 20px;
        border: 1px solid #eee
    }

    li {
        padding: 10px;
        border-bottom: 1px dotted #ccc;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .title {
        width: 0;
        flex-grow: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .time {
        flex-shrink: 0;
        padding-left: 4px;
    }
</style>
<ul>
    <li>
        <div class="title">短时在两边</div>
        <div class="time">刚刚</div>
    </li>
    <li>
        <div class="title">文字较多时出现省略号，阿三大苏打收到阿大撒</div>
        <div class="time">2022-06-01</div>
    </li>
    <li>
        <div class="title">文字较多时出现省略号，阿三大苏打收到阿大撒</div>
        <div class="time">06-01</div>
    </li>
</ul>

上面就是title定一个为宽度为0的容器，但是又给了一个flex-grow，当又空余空间会将宽度增加占有剩余的

time定义了flex-shrink为0，没给宽度定义，自适应宽度，当空间不够时，会优先全部展示出来；挤压title的宽度