verhindern Einwickelstraßen in Flexbox Kind-Element

Question

Wie kann ich den Zeilenumbruch eines Flexbox Element verhindern? Ist es überhaupt möglich?

Ich versuche, eine zweispaltige Raster mit Flexbox mit dem folgenden Markup zu erstellen:

<div class="flex-container"> 
    <div class="no-wrap">this should not wrap</div> 
    <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div> 
</div> 

Das .no-wrap Element nur so breit sein sollte, wie es solche ‚sein muss‘, dass im Inneren der gesamte Text wrappt nicht in eine zweite Zeile. Das Element .can-wrap nimmt den verbleibenden Platz ein und wickelt gegebenenfalls um.

Ich verwende diese CSS (mit prefrix frei):

.flex-container{ 
    display:flex; 
} 

.no-wrap{ 
    flex-basis:initial; 
} 

Ich dachte, das flex-basis:initial das Element aus Einwickeln Linien verhindern würde - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Hier ist ein codepen: http://codepen.io/jshawl/pen/bknAc

I Ich weiß, dass ich die Breite des Elements .no-wrap fixieren kann, aber wie kann ich es so breit machen, dass Zeilenumbruch verhindert wird?

Der Schwimmer Äquivalent für das .no-wrap Element wäre:

.no-wrap{ 
    display:block; 
    float:left; /* be as wide as need be! */ 
} 

Answer 1

Die Immobilie die Sie suchen, ist flex-schrumpfen, nicht flex-Basis.

.no-wrap{ 
    flex-shrink: 0; 
} 

ist jedoch zu beachten, dass IE10 nicht als diese Eigenschaft unterstützt aufgeführt wird (wie es in der Beschreibung nicht vorhanden war, die zum Zeitpunkt der Flexbox Implementierung hinzugefügt). Sie können stattdessen die flex Eigenschaft verwenden.

.no-wrap{ 
    flex: 0 0 auto; 
}