如果所有项目的 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进行自适应即可。