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