CSS 在 flexbox 项目上忽略宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21406397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width ignored on flexbox items
提问by Alex
I've set width: 200px;on the left <div>but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.
我已经设置width: 200px;在左边，<div>但是如果我用浏览器检查器工具查看它，它的实际宽度似乎是随机的。它根据窗口大小不断变化。
Why doesn't the width take effect?
为什么宽度不生效？
EDIT: If I remove width: 100%the width stays fixed. But I need that so the #maindiv takes the remaining width :( Is there any way to have the sidebar @ fixed width and the other <div>fill the rest of the container width? width: auto;on #maindoesn't work..
编辑：如果我删除width: 100%宽度保持固定。但我需要这样#maindiv 需要剩余的宽度 :( 有没有办法让侧边栏 @ 固定宽度和另一个<div>填充容器宽度的其余部分？width: auto;on#main不起作用..
采纳答案by adrift
Remove the width on .container > divand use flex: auto;on #main: fiddle
删除的宽度.container > div和使用flex: auto;上#main：小提琴
#main {
flex: auto;
background: lightblue;
-webkit-order: 2;
order: 2;
}
回答by vals
The answer from Adrift is perfect; but a change to make it more flexwould be
Adrift 的答案是完美的；但改变使其更灵活将是
#left{
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
And remove the width property entirely.
并完全删除 width 属性。
It would be the flexway to say that the element will have an invariable width of 200px
这将是说元素将具有 200px 的不变宽度的flex方式
回答by gpgekko
Give the #leftdiv a min-widthof 200px, should do the job.
给#leftDIV一个min-width的200px，应该做的工作。
回答by BassMHL
My preferred way of dealing with this situation is to add:
我处理这种情况的首选方法是添加：
flex-shrink: 0;
This way you may continue using widthin your Flex container and you've given it specific information about how you wish this flex item to behave.
通过这种方式，您可以继续width在您的 Flex 容器中使用，并且您已经向它提供了有关您希望此 Flex 项目如何表现的特定信息。
Another option, depending on the requirement is to use min-width, which is respected when using flex.
另一种选择，取决于需求是使用min-width，这在使用 flex 时受到尊重。
回答by Hassan Azimi
add display: contentson the element or div you want to maintain the width.
添加display: contents要保持宽度的元素或 div。
回答by BoogieBill
Also (if nothing from above works)
另外（如果上面没有任何效果）
Check your min-widthand max-width. It fixed the same problem for me by increasing their range.
检查您的min-width和max-width。它通过增加它们的范围为我解决了同样的问题。
回答by rjdmello
Add display:inline-block;in left class
添加display:inline-block;左类
