prevent wrapping lines in flexbox child element

Question

How do I prevent line wrapping of a flexbox element? Is it even possible?

I'm attempting to create a two column grid with flexbox with the following 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> 

The .no-wrap element should only be as wide as it 'needs to be' such that all of the text inside does not wrap to a second line. The .can-wrap element will take up the remaining space, and wrap if need be.

I'm using this CSS (with prefrix free):

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

I thought the flex-basis:initial would prevent the element from wrapping lines - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Here's a codepen: http://codepen.io/jshawl/pen/bknAc

I know I can fix the width of the .no-wrap element, but how can I make it be as wide enough to prevent line wrapping?

The float equivalent for the .no-wrap element would be:

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

Answer 1

The property you are looking for is flex-shrink, not flex-basis.

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

Note however, that IE10 is not listed as supporting this property (as it did not exist in the specification at the time they added the Flexbox implementation). You can use the flex property instead.

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