在flexbox项目上忽略宽度

Question

http://jsfiddle.net/XW9Se/

我已设置width: 200px;在左侧,<div>但如果我使用浏览器检查器工具查看它,则显示实际宽度是随机的.它会根据窗口大小不断变化.

为什么宽度没有生效？

编辑:如果我删除width: 100%宽度保持固定.但我需要这样,所以#maindiv取剩余的宽度:(有没有办法让侧边栏@固定宽度和另一个<div>填充容器宽度的其余部分？width: auto;on #main不起作用..

Answer 1

Adrift的答案是完美的; 但是改变,使其更加柔性会

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

并完全删除width属性.

如果说元素的宽度不变为200px,那将是灵活的方式

Answer 2

我处理这种情况的首选方法是添加：

flex-shrink: 0;

通过这种方式，您可以继续width在您的 Flex 容器中使用，并且您已经向它提供了有关您希望此 Flex 项目如何表现的特定信息。

另一种选择，取决于需求是使用min-width，这在使用 flex 时受到尊重。

Answer 3

卸下宽度.container > div和使用flex: auto;上#main:小提琴

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

Answer 4

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