css - entre - Ancho ignorado en los elementos de flexbox

flexbox generator

Question

http://jsfiddle.net/XW9Se/

He establecido el width: 200px; a la izquierda <div> pero si lo veo con la herramienta de inspección del navegador, parece que el ancho real es aleatorio o algo así. Sigue cambiando en función del tamaño de la ventana.

¿Por qué el ancho no tiene efecto?

EDITAR : Si elimino el width: 100% el ancho se mantiene fijo. Pero necesito eso para que el div. #main tome el ancho restante :( ¿Hay alguna forma de que la barra lateral @ anchos fijos y el otro <div> llene el resto del ancho del contenedor? width: auto; en #main no trabajo..

Answer 1

Añadir display: inline-block; en la clase izquierda

Answer 2

Dale al #left div un min-width de 200px , debería hacer el trabajo.

Answer 3

Elimine el ancho en .container > div y use flex: auto; en #main : fiddle

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

Answer 4

La respuesta de Adrift es perfecta; Pero un cambio para hacerlo más flexible sería

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

Y eliminar la propiedad de ancho por completo.

Sería la manera flexible de decir que el elemento tendrá un ancho invariable de 200px