Flexbox and overflow: hidden not working properly
Your problem is caused by setting the flex-basis
of .flex > div
to 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 20px
and the space will be evenly divided because flex-grow
is set to 1
.
This article should help you get started with the flex layout.
Here is a modified version of 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;
}
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