css3 - grow - flexbox grid

Evitar que se formen líneas en el elemento infantil flexbox

Question

¿Cómo evito el ajuste de líneas de un elemento FlexBox? ¿Es posible?

Estoy intentando crear una grilla de dos columnas con flexbox con el siguiente marcado:

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

El elemento .no-wrap solo debe ser tan ancho como ''necesario'', de modo que todo el texto dentro no se ajuste a una segunda línea. El elemento .can-wrap ocupará el espacio restante y se ajustará si es necesario.

Estoy usando este CSS (sin prefijo):

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

Pensé que la flex-basis:initial evitaría que el elemento envolviera líneas - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Aquí hay un codepen: http://codepen.io/jshawl/pen/bknAc

Sé que puedo arreglar el ancho del elemento .no-wrap , pero ¿cómo puedo hacerlo lo suficientemente amplio como para evitar el ajuste de líneas?

El equivalente de flotante para el elemento .no-wrap sería:

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

Answer 1

La propiedad que está buscando es flex-shrink , no flex-basis .

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

Sin embargo, tenga en cuenta que IE10 no figura como compatible con esta propiedad (ya que no existía en la especificación en el momento en que agregaron la implementación de Flexbox). Puede usar la propiedad flex en su lugar.

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