Ширина проигнорирован по пунктам Flexbox

Question

http://jsfiddle.net/XW9Se/

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

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

изменить: если я удалю width: 100%, ширина останется фиксированной. Но мне нужно, чтобы #main div занимал оставшуюся ширину :(Есть ли способ иметь боковую панель @ фиксированной ширины, а другая DIV заполняет остальную ширину контейнера? width: auto; на #main не работает.

Answer 1

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

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

Answer 2

Добавить дисплей:. встроенный блок, в левом классе

Answer 3

Дайте #left DIV min-width из 200px, должны сделать работу

Answer 4

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

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

И удалить свойство ширины полностью.

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