prevent wrapping lines in flexbox child element
CssFlexboxCss Problem Overview
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! */
}
Css Solutions
Solution 1 - Css
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;
}