prevent wrapping lines in flexbox child element

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