在flexbox项目上忽略宽度

Question

http://jsfiddle.net/XW9Se/

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

为什么宽度不起作用？

编辑：如果我删除width: 100%，则宽度保持不变。但我需要这样，所以#main div占用剩余的宽度:(有没有办法让侧边栏固定宽度，另一个<div>填充容器宽度的其余部分？width: auto;在#main上无法正常工作..

Answer 1

Adrift的答案是完美的;但更改为 flex 将是

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

并完全删除width属性。

这将是 flex 方式，表示该元素的宽度不变为200px

Answer 2

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

flex-shrink: 0;

通过这种方式，您可以继续在Flex容器中使用width，并为它提供了有关希望此Flex项的行为的特定信息。

根据要求，另一种选择是使用min-width，在使用flex时会受到尊重。

Answer 3

删除.container > div上的宽度并使用#main上的flex: auto;：fiddle

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

Answer 4

#left div给min-width 200px {{1}}，应该完成这项工作。

Answer 5

add display: contents on the element or div you want to maintain the width.

Answer 6

也（如果上述方法无效）

检查您的最小宽度和最大宽度。 通过扩大范围，对我来说解决了同样的问题。

Answer 7

在没有足够的内容填充该宽度的情况下使用flex不解决最小宽度的问题解决了这个问题。

在具有无效最小宽度声明的同一flex元素上添加CSS规则box-sizing: initial;。

Answer 8

添加display：inline-block;在左班