CSS üç sütun düzeni bilinmeyen ilk ve esnek ikinci sütunlar ile

Question

İlk sütun genişliğinin bilinmediği ve yalnızca gerektiği kadar alan kapladığı üç sütun düzenine ihtiyacım var. İkinci sütun, birinci ve üçüncü arasındaki boşluğu doldurmalı ve içerik, taşma olarak elipslere sahip olmalıdır. İkinci katın içeriği birinci ve üçüncü arasındaki boşluktan daha azsa, doğru hizalanmalıdır. Üçüncü kol genişliği biliyor/sabit.

Burada bir çalışma örneğim var, ancak herhangi bir genişliğe sahip esnek sütunu almak için kötü bir kesmek kullanıyor. 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>

Herkes daha iyi yol önerebilir ?

Sass kullanıyorum ve gerekiyorsa html yapısı esnektir. Ayrıca IE10'u desteklemem gerekir:/

Answer 1

"CSS flexbox" modelini öğrenmelisiniz. burada fiddle

flexbox'a işleri

.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 */