Cannot set flexbox child width to 100%

Question

I am learning CSS flexbox and doing a simple layout where I wanted the first flexible child to be displayed with the 100% width of the parent and remaining the flexible element wrapped below. In addition, wrapped flex items should occupy the width in a certain ratio (easy to set using the flex property).

To do this, I set the flex-basis property of the first flex element to 100% and set the flex property of the next 2 in the relation I want. Here's what the corresponding CSS looks like (link to the full script 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 element width to 1000px, and for the next two - 400px and 600px respectively; wrapped and displayed below the first child.

But for some reason CSS is interrupted, and the 2nd and 3rd positions are being forced out of the main container.

What is weirder is that adding a field to flex elements eliminates all this, and I don’t understand how this happens (I have to do something stupid). Even adding some border or padding to the ".flex-item" rule works.

 .flex-item{ margin: 5px; } 

Here is the JS Fiddle . You can try not to comment on the ".flex-item" rule in CSS to see what happens.

I was lazy not to add any prefixes (since almost every new browser supports it), but the problem is the same as in the latest FF, IE and chrome.

Answer 1

The second and third elements have a width of 0, so they can fit anywhere.

Thus, they remain in the first line.

just set 1px for the basis and they will be in the second line

 *{ 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 

 .flex-item:nth-child(2) { flex:2 1px; } .flex-item:nth-child(3) { flex:3 1px; }