Ширина ігнорується на елементах flexbox

http://jsfiddle.net/XW9Se/

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

Чому ширина не набуває чинності?

РЕДАГУВАТИ : Якщо я видалю, width: 100%ширина залишається фіксованою. Але мені потрібно , що так #mainДІВ займає залишилася ширину :( Чи є спосіб , щоб мати бічну панель @ фіксовану ширину , а іншу <div>заливку решту ширини контейнера? width: auto;На #mainне працюють ..

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

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

Відповідь від Adrift ідеальна; але зміна, щоб зробити її більш гнучкою , буде

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

І повністю видаліть властивість width.

Це був би гнучкий спосіб сказати, що елемент буде мати незмінну ширину 200px

Мені найкращий спосіб вирішити цю ситуацію - додати:

flex-shrink: 0;

Таким чином ви можете продовжувати використовувати widthу своєму контейнері Flex, і ви надали йому конкретну інформацію про те, як ви хочете, щоб цей елемент flex поводився.

Іншим варіантом, залежно від вимоги, є використання min-width, яке дотримується при використанні flex.

Дайте #leftДив а , min-widthв 200px, повинен робити цю роботу.

додати display: contentsдо елемента або div, який потрібно зберегти в ширині.

Також (якщо зверху нічого не працює)

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

Вирішив це з гнучкістю, не дотримуючись мінімальної ширини, коли для її заповнення не вистачало вмісту.

Додано правило CSS box-sizing: initial;для того самого елемента flex, який мав неробоче оголошення про мінімальну ширину.

Додати display:inline-block;в лівому класі