Width ignored on flexbox items

Question

http://jsfiddle.net/XW9Se/

I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.

Why doesn't the width take effect?

EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar @ fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..

Answer 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

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