Предотвращать обертывание линий в дочернем элементе flexbox

Как предотвратить обертку строки элемента flexbox? Возможно ли это?

Я пытаюсь создать сетку с двумя столбцами с flexbox со следующей разметкой:

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

Элемент .no-wrap должен быть только шириной, так как он должен быть таким, чтобы весь текст внутри не переносился на вторую строку. Элемент .can-wrap будет занимать оставшееся пространство и, при необходимости, обернуть.

Я использую этот CSS (с prefrix бесплатно):

.flex-container{
  display:flex;
}

.no-wrap{
  flex-basis:initial;
}

Я думал, что flex-basis:initial будет препятствовать тому, чтобы элемент обертывал строки - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Здесь код: http://codepen.io/jshawl/pen/bknAc

Я знаю, что могу исправить ширину элемента .no-wrap, но как я могу сделать его настолько широким, чтобы предотвратить перенос строк?

Поплавковый эквивалент для элемента .no-wrap:

.no-wrap{
  display:block;
  float:left; /* be as wide as need be! */
}

Ответы

Ответ 1

Имущество, которое вы ищете, является гибким, а не гибким.

.no-wrap{
  flex-shrink: 0;
}

Обратите внимание, однако, что IE10 не указан в качестве поддержки этого свойства (поскольку он не существовал в спецификации в то время, когда они добавили реализацию Flexbox). Вместо этого вы можете использовать свойство flex.

.no-wrap{
  flex: 0 0 auto; 
}