flexbox项目上的宽度被忽略

http://jsfiddle.net/XW9Se/

我已经设置width: 200px;在左侧，<div>但是如果使用浏览器检查器工具进行查看，则实际宽度似乎是随机的或某种程度。它根据窗口大小不断变化。

为什么宽度不生效？

编辑：如果我删除width: 100%宽度保持固定。但是我需要这样，以便#maindiv占用剩余的宽度:(是否有任何方法可以使侧边栏@固定宽度而另一个<div>填充容器的其余宽度？width: auto;在#main上不起作用..

去除宽度，.container > div然后flex: auto;在#main：fiddle上使用

#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时要注意这一点。

给#leftDIV一个min-width的200px，应该做的工作。

display: contents在要保持宽度的元素或div上添加。

另外（如果以上方法均无效）

检查您的min-width和max-width。通过扩大范围，它为我解决了相同的问题。

添加display:inline-block;左类