.container {    display: -webkit-flex; }.container>div:first-child{    white-space:nowrap;   -webkit-order:1;   -webkit-flex: 0 1 auto; /*important*/    text-overflow: ellipsis;    overflow:hidden;    min-width:0; /* new algorithm overrides the width calculation */}.container > div:last-child {    -webkit-flex: 1;    -webkit-order:2;    background: red;    -webkit-flex:1 0 auto; /*important*/}.container > div:first-child:hover{    white-space:normal;}

<div class="container">    <div>foo barfoo bar</div>    <div>foo bar</div></div><div class="container">        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar        foo barfoo barfoo barfoo barfoo barfoo barfoo bar        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>    <div>foo bar</div></div><div class="container">    <div>foo barfoo bar</div>    <div>foo bar</div></div><div class="container">        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar        foo barfoo barfoo barfoo barfoo barfoo barfoo bar        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>    <div>foo bar</div></div><div class="container">    <div>foo barfoo bar</div>    <div>foo bar</div></div>