如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。 如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。

实际场景举例,比如[a,b]两个元素水平排列,当父宽度发生变化时,b不受宽度影像,a进行自由伸缩。此时可以用shrik来实现。

<style lang="css">
.th-cell {
    border-bottom: 1px solid #EBEEF5;
    padding: 8px;
    font-size: 14px;
    color: #606266;
}

.th-cell:hover {
    background-color: #f5f7fa;
}

.th-cell-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.th-cell-row + .th-cell-row {
    margin-top: 5px;
}

.th-cell-row span {
    line-height: 23px
}

span + span {
    padding-left: 5px;
}

.th-row-width-fixed {
    flex-shrink: 0;
}

.th-row-width-auto {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


</style>

<div style="width: 50%;  margin-top: 20px;  border-right: 1px solid lightgray;">

    <div class="th-cell">
        1111
    </div>

    <div class="th-cell">
        <div class="th-cell-row">
            <span class="th-row-width-auto">正昊化纤B-2号地块</span>
            <span class="th-row-width-fixed">已超期2001天</span>
        </div>

        <div class="th-cell-row">
            <span class="th-row-width-auto">3701002012B06724 投资促进中心</span>
            <span class="th-row-width-fixed">图标</span>
        </div>
    </div>

    <div class="th-cell">
        <div class="th-cell-row">
            <span class="th-row-width-auto" title="LED蓝宝石晶体基片衬底科研楼建设">LED蓝宝石晶体基片衬底科研楼建设</span>
            <span class="th-row-width-fixed">预计开工:2011-12-19</span>
        </div>
        <div class="th-cell-row">
            <span class="th-row-width-auto">3701002011B00025 齐鲁软件园发展中心</span>
            <span class="th-row-width-fixed"> 图标</span>
        </div>
    </div>

    <div class="th-cell">
        <div class="th-cell-row">
            <span class="th-row-width-auto" title="LED蓝宝石晶体基片衬底科研楼建设">LED蓝宝石晶体基片衬底科研楼建设</span>
            <span class="th-row-width-fixed">预计开工:2011-12-19</span>
        </div>
        <div class="th-cell-row">
            <span class="th-row-width-auto">3701002011B00025 xkccc软件园发展中心</span>
            <span class="th-row-width-fixed"> 图标</span>
        </div>
        <div class="th-cell-row">
            <span class="th-row-width-auto">3701002011B00025 xxxzz软件园发展中心</span>
            <span class="th-row-width-fixed"> 图标</span>
        </div>
    </div>

    <div class="th-cell">
        1111
    </div>
</div>

效果如下:

1111
正昊化纤B-2号地块 已超期2001天
3701002012B06724 投资促进中心 图标
LED蓝宝石晶体基片衬底科研楼建设 预计开工:2011-12-19
3701002011B00025 齐鲁软件园发展中心 图标
LED蓝宝石晶体基片衬底科研楼建设 预计开工:2011-12-19
3701002011B00025 xkccc软件园发展中心 图标
3701002011B00025 xxxzz软件园发展中心 图标
测试文字

题外话,如果比较熟悉使用element-ui组件el-scroll,那么scroll的父级可以不指定具体的高度,直接利用flex-shrin进行自适应即可。