CSS-Layout mit drei Spalten mit unbekannter erster und flexibler zweiter Spalte

Question

Ich benötige ein Layout mit drei Spalten, in dem die erste Spaltenbreite unbekannt ist und nur so viel Speicherplatz belegt, wie benötigt wird. Die zweite Spalte sollte den Abstand zwischen dem ersten und dem dritten füllen und der Inhalt sollte als Überlauf Ellipsen haben. Wenn der Inhalt der zweiten Spalte kleiner als der Abstand zwischen der ersten und der dritten Spalte ist, sollte er rechtsbündig sein. Die dritte Spaltenbreite ist bekannt/festgelegt.

Ich habe ein funktionierendes Beispiel hier, aber es verwendet einen bösen Hack, um die flexible Spalte zu erhalten, um jede Breite zu haben. 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>

Kann jemand einen besseren Weg vorschlagen?

Ich benutze Sass und die HTML-Struktur ist flexibel, wenn nötig. Ich muss auch IE10 unterstützen:/

Answer 1

Sie sollten lernen "CSS-Flexbox" -Modell. hier ist 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 */