77

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! */
}

2 Answers 2

135

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; 
}
15

In case the flex-shrink property doesn't solve the problem for you, try setting the white-space to nowrap.

.no-wrap {
  white-space: nowrap
}

You can alse use pre if you want to preserve the new lines (unlike nowrap).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.