Verhindern Sie das Umbrechen von Zeilen im Flexbox-Child-Element

Wie kann ich verhindern, dass der Textumbruch einer flexbox-element? Ist es überhaupt möglich?

Ich bin versucht, zu erstellen eine zweispaltige raster mit flexbox mit dem folgenden markup:

<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>

Den .no-wrap element sollte nur so breit sein, wie es 'sein muss', so dass alle den text nicht umbrochen, um eine zweite Linie. Die .can-wrap element nehmen den übrigen Raum, und wickeln Sie, wenn es sein muss.

Ich bin mit diesem CSS (mit prefrix kostenlos):

.flex-container{
  display:flex;
}

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

Ich dachte, die flex-basis:initial würde verhindern, dass das element aus der Verpackung Linien - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

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

Ich weiß, ich kann fix die Breite der .no-wrap element, aber wie kann ich es machen werden, wie breit genug ist, um zu verhindern, dass Zeilenumbrüche?

Float äquivalent für die .no-wrap element wäre:

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

InformationsquelleAutor der Frage jessh | 2013-08-20