Unable to set width of flexbox child to 100%
I am learning CSS flexbox and was doing a simple layout where I wanted the first flex child to displayed with 100% width of the parent and rest flex items wrapping below. Also, the wrapped flex items should occupy width in a specific ratio (easy to set with 'flex' property).
To do this I set "flex-basis" property of first flex item to 100% and set flex property of next 2 to the ratio I want. Here is what the pertinent CSS looks like (link to complete fiddle is below):
.main{
max-width: 1000px;
margin: 100px auto;
display: flex;
flex-flow: row wrap;
}
/*using ususal shorthand notation*/
.flex-item:nth-child(1) {
flex:1 100%;
}
.flex-item:nth-child(2) {
flex:2;
}
.flex-item:nth-child(3) {
flex:3;
}
This should set the first item's width to 1000px and for the next two as 400px and 600px respectively; wrapped and displayed below the first child.
But for some reason the CSS breaks, and the 2nd and 3rd items are pushed outside main container.
What more strange is that adding margin to the flex items fixes the whole thing and I don't understand how this is happening (I must be doing something stupid). Even addding some border or padding to the '.flex-item' rule works.
.flex-item{
margin: 5px;
}
Here is the JS Fiddle. You can try un-commenting the '.flex-item' rule in CSS to see what is going on.
I was lazy not to add the any prefixes (since almost every new browser supports it) ,but the problem is same across latest FF, IE and chrome.
The second and third elements have 0 width, so they can fit in any place ..
That's way they stay in the first line.
just set 1px for basis, and they will be in the second row
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: 'Raleway', Helvetica, sans-serif;
font-size: 14px;
font-weight: 300;
color: #555;
}
.main{
max-width: 1000px;
margin: 20px auto;
border: 1px dotted #999;
padding: 20px;
display: flex;
flex-flow: row wrap;
}
/* adding any border, margin, padding rules here fixes it */
.flex-item:nth-child(2) {
flex:2 1px;
background-color: lightyellow;
}
.flex-item:nth-child(3) {
flex:3 1px;
}
.flex-item:nth-child(1) {
flex:1 100%;
} <div class="main">
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consequat lorem. In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
</p>
<p class="flex-item">
In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
</p>
<p class="flex-item">
In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit