最近工作的时候经常会有这种需求，父容器宽度固定(基本就是一屏宽)，两个子容器贴左侧；当右子容器到达边缘时，让左子容器太长时省略。就像下面这样。

很大的问题就是右边的长度是不固定的，右边又必须紧靠着左边，想要完美实现的话，可能用js实现会比较好，但是始终觉得为这样一个效果来增加一段js是在不好，秉持着能用css实现的绝不用js，我们来看一下怎么用css实现这个效果。

max-width

第一种方案，为两个子容器设置max-width。

.father{
    white-space: nowrap;
    width: 200px;
}
.child1 {
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: red;
    max-width:50%;
}

.child2 {
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: blue;
    max-width:50%;
}

当然，这种情况下，就是很难界定max-width，假如定两边的max-width都为50%的话，有时候左边超过50%，但其实总的并没有超过100%，其实整个是放得下，但是就给隐藏了，没有完美的实现我们的要求。

flex方法

第二种方案，利用flex的新属性flex-grow和flex-shrink

.father{
    display: flex;
    width: 200px;
    -webkit-line-clamp: 1;
}
.child1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: red;
    flex-grow:0;
}

.child2 {
    background-color: blue;
    flex-shrink: 0;
}

flex-grow和flex-shrink都是用于设置或检索弹性盒的扩展比率和收缩比率，
简单的说就是，flex-grow决定你有位置的时候放不放大，flex-shrink决定你没位置的时候缩不缩小，flex-grow的默认值为0，也就是，存在剩余空间，也不放大，多余的空间就放在那里，flex-shrink的默认值为1，我们将其设置为0，也就是如果空间不足，该项目也不缩小，这样，我们就能保证右边的永远都是全部显示（即使空间不够，压缩的也是左边的）。

这种方式完美的实现了我们需要的效果,但是还有一个问题，兼容性的问题（主要就是IE），不过，考虑到主要是移动端的应用，所以相对的其实可以接受啦，（支持andriod 4.4+，IOS 7.0+）