flexbox 项目的宽度被忽略答案

【问题标题】：Width ignored on flexbox itemsflexbox 项目的宽度被忽略
【发布时间】：2014-02-19 19:10:33
【问题描述】：

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

为什么宽度不生效？

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

【问题讨论】：

【解决方案1】：

Adrift 的答案是完美的；但要使其更 flex 的更改将是

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

并完全删除 width 属性。

这将是 flex 方式说元素将具有 200 像素的固定宽度

【讨论】：

【解决方案2】：

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

flex-shrink: 0;

这样你就可以在你的 Flex 容器中继续使用width，并且你已经给它提供了关于你希望这个弹性项目如何表现的具体信息。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

给#left div 一个min-width 或200px，应该可以完成这项工作。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

还有（如果上面没有任何效果）

检查您的 min-width 和 max-width。它通过增加它们的范围为我解决了同样的问题。

【讨论】：

【解决方案7】：

当没有足够的内容来填充该宽度时，使用不考虑最小宽度的 flex 解决了这个问题。

在具有无效 min-width 声明的同一个 flex 元素上添加了 CSS 规则 box-sizing: initial;。

【讨论】：

【解决方案8】：

在左侧类中添加display:inline-block;

【讨论】：