不明な最初と柔軟な第2列のCSS 3列レイアウト

Question

最初の列幅が不明で、必要なだけのスペースしか必要としない3列レイアウトが必要です。 2番目の列は1番目と3番目の間のスペースを埋める必要があり、コンテンツはオーバーフローとして省略記号を持つ必要があります。 2番目の列の内容が1番目と3番目の間のスペースよりも小さい場合は、右揃えにしてください。 3番目の列の幅は知っている/固定されています。

私はここで実際の例を示していますが、フレキシブルな列に任意の幅を持たせるために厄介なハックを使用しています。 http://jsfiddle.net/ew65G/638/

.col1 { 
 
    background-color: #ddf; 
 
    float: left; 
 
    height: 65px; 
 
} 
 
.col2 { 
 
    position: relative; 
 
    background-color: green; 
 
    float: none; 
 
    height: 65px; 
 
    overflow: hidden; 
 
    display: table-cell; 
 
    min-width: 100%; 
 
} 
 
.col2 span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    max-width: 99%; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
} 
 
/* col3 has a known width */ 
 
.col3 { 
 
    background-color: cyan; 
 
    float: right; 
 
    height: 65px; 
 
}

<div class="col1">Column1 has to be flexible</div> 
 
<div class="col3">Column3</div> 
 
<div class="col2"> 
 
    <div> 
 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
    </div> 
 
    <span> 
 
    This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. 
 
    </span> 
 
</div>

誰もがより良い方法を提案することはできますか？

私はsassを使用しています。必要に応じて、html構造体は柔軟です。私はまたIE10をサポートする必要があります：/

Answer 1

"css flexbox"モデルを学ぶべきです。 はここfiddle

フレキシボックスが機能

.root { display:flex;} 
.col1 { } /*takes up as much space as is needed*/ 
.col2 { flex:1;} /*take all remaining space */ 
.col3 { width:65px;} /*fixed width, no resize */