CSS Flexbox 和溢出：隐藏无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34154349/
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
Flexbox and overflow: hidden not working properly
提问by r3plica
I have a bit of HTML:
我有一些 HTML：
<div class="flex">
<div class="red">
<div class="example">
<div class="wide">
</div>
</div>
</div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="indigo"></div>
</div>
<div class="flex">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="indigo"></div>
</div>
And my CSS:
还有我的 CSS：
.flex {
display: -webkit-box;
display: flex;
height: 100px;
width: 100%;
}
.flex > div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
margin: 15px;
}
.example {
overflow: hidden;
width: 100%;
border: 1px solid black;
}
.example .wide {
width: 400px;
}
Now, the problem here is, if I have a divinsidean element that is a flexbox and that divhas overflow: hidden;I would expect the parent flexbox to just take up the default amount of space (i.e. the same as the other elements, but it doesn't.
现在，这里的问题是，如果我有一个div里面是一个Flexbox的一个元素，并且div具有overflow: hidden;我希望家长Flexbox的只是占用空间的默认量（即同其他元素，但它不会.
It is like it ignores the overflowand just expands the divanyway.
就像它忽略了overflow并且只是扩展了div无论如何。
I have made a CodePenso you can see the issue.
我制作了一个CodePen，所以你可以看到这个问题。
I would like all the coloured divs to be the same width.
我希望所有彩色div的宽度都相同。
Can anyone help?
任何人都可以帮忙吗？
回答by Huba Nagy
Your problem is caused by setting the flex-basisof .flex > divto auto. This causes the div to expand to accommodate its content as it has no set dimension along the flex axis. Give it a set value like 20pxand the space will be evenly divided because flex-growis set to 1.
你的问题是由设置造成flex-basis的.flex > div对auto。这会导致 div 扩展以容纳其内容，因为它没有沿 flex 轴设置尺寸。给它一个像这样的设置值20px，空间将被平均划分，因为flex-grow设置为1。
This articleshould help you get started with the flex layout.
这篇文章应该可以帮助您开始使用 flex 布局。
Here is a modified versionof your code
这是您的代码的修改版本
.flex {
display: -webkit-box;
display: flex;
height: 100px;
width: 100%;
}
.flex > div {
flex-grow: 1;
flex-shrink: 1;
/* set value for the flex basis, the two properties above will evenly
divide the space. */
flex-basis: 20px;
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
margin: 15px;
overflow: hidden;
}
.example {
overflow: hidden;
border: 1px solid black;
}
.example .wide {
width: 400px;
height: 10px;
}
回答by mohammad feiz
only set position of parent element
只设置父元素的位置
<style>
.parent{
display:flex;
overflow:hidden;
position:relative;
}
.child{
flex-grow:2
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
this work for me
这对我有用
