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

this should not 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.

``` 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://codepe…

Accepted Answer

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

prevent wrapping lines in flexbox child element

Solution

Problem