zapobiega zawijaniu linii w elemencie potomnym Flexbox

Question

Jak zapobiec zawijaniu wierszy elementu flexbox? Czy to możliwe?

Ja próbuje utworzyć siatkę dwie kolumny ze schematu flexbox z następującym znaczników:

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

Element .no-wrap powinny być tylko tak szeroko, jak to musi być "tak, że cały tekst wewnątrz nie jest zawijany do drugiej linii. Element .can-wrap zajmie pozostałe miejsce i zawinie w razie potrzeby.

Używam tego CSS (z prefrix darmo):

.flex-container{ 
    display:flex; 
} 

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

Myślałem, że flex-basis:initial uniemożliwiłyby element z linii zawijania - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Oto codepen: http://codepen.io/jshawl/pen/bknAc

I wiem, że mogę naprawić szerokość elementu .no-wrap, ale jak mogę go ustawić tak szerokie, aby zapobiec zawijaniu linii?

Równowartość pływak dla elementu .no-wrap byłoby:

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

Answer 1

Obiekt szukasz jest flex-kurczyć nie flex-podstawa.

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

zauważyć, żę IE10 nie znajduje się na liście wspiera tę właściwość (jako że nie występują w opisie w czasie, gdy dodaje się realizację flexbox). Zamiast tego można użyć właściwości flex.

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