Ширина игнорируется на объектах flexbox

http://jsfiddle.net/XW9Se/

Я установил width: 200px; слева <div> но если я просматриваю его с помощью инструмента инспектора браузера, кажется, что реальная ширина случайная или что-то в этом роде. Он постоянно меняется в зависимости от размера окна.

Почему ширина не вступает в силу?

РЕДАКТИРОВАТЬ: Если я удаляю width: 100% ширина остается фиксированной. Но мне нужно, чтобы #main div #main оставшуюся ширину :( Есть ли способ, чтобы боковая панель @фиксированная ширина, а другой <div> заполнял остальную часть ширины контейнера? #main width: auto; on #main не Работа..

Ответ 1

Удалите ширину в .container > div и используйте flex: auto; на #main: скрипка

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

Ответ 2

Ответ от Adrift идеален; но изменение, сделавшее его более гибким, будет

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

И полностью удалите свойство width.

Это был бы flex способ сказать, что элемент будет иметь неизменную ширину 200px

Ответ 3

Дайте #left div a min-width из 200px, выполните задание.

Ответ 4

добавить display: contents элемента или div, который вы хотите сохранить ширину.

Ответ 5

Также (если ничего не работает сверху)

Проверьте свою минимальную ширину и максимальную ширину. Это исправило ту же проблему для меня, увеличив их диапазон.

Ответ 6

Добавить отображение: встроенный блок; в левом классе