Width ignored on flexbox items

Solution 1:

The answer from Adrift is perfect; but a change to make it more flex would be

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

And remove the width property entirely.

It would be the flex way to say that the element will have an invariable width of 200px

Solution 2:

My preferred way of dealing with this situation is to add:

flex-shrink: 0;

This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.

Another option, depending on the requirement is to use min-width, which is respected when using flex.

Solution 3:

Remove the width on .container > div and use flex: auto; on #main: fiddle

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