impedisce il wrapping delle linee nell'elemento figlio flexbox

Question

Come si impedisce il ritorno a capo di un elemento Flexbox? È possibile?

Sto tentando di creare una griglia a due colonne con FlexBox con il seguente 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> 

L'elemento .no-wrap dovrebbe essere solo il più ampio in quanto 'ha bisogno di essere' in modo tale che tutto il testo all'interno non si avvolge in una seconda riga. L'elemento .can-wrap occuperà lo spazio rimanente e si avvolgerà se necessario.

Sto usando questo CSS (con prefrix libero):

.flex-container{ 
    display:flex; 
} 

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

Ho pensato che il flex-basis:initial impedirebbe l'elemento dalle linee avvolgenti - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Ecco un codepen: http://codepen.io/jshawl/pen/bknAc

I so che posso correggere la larghezza dell'elemento .no-wrap, ma come posso renderlo sufficientemente largo da impedire il ritorno a capo?

L'equivalente galleggiante per l'elemento .no-wrap sarebbe:

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

Answer 1

La proprietà che stai cercando è flex-shrink, non flex-base.

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

nota tuttavia che IE10 non è elencato come supporto di questa struttura (in quanto non esisteva nella specifica al momento aggiunto l'attuazione Flexbox). Puoi invece utilizzare la proprietà flex.

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