无法将Flexbox子项的宽度设置为100％
我正在学习CSS flexbox，并且正在做一个简单的布局，我希望第一个flex子项以100％宽度的父项显示，其余flex项目在下面打包。 此外，包裹的弹性项目应该占用特定比例的宽度（易于使用'flex'属性进行设置）。
为此，我将第一个flex项目的“flex-basis”属性设置为100％，并将next 2的flex属性设置为我想要的比例。 以下是相关CSS的样子（链接完成小提琴下面）：
.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;
}
这应该将第一个项目的宽度设置为1000px，将后两个分别设置为400px和600px; 包装并显示在第一个孩子的下面。
但由于某种原因CSS中断，第二和第三项被推到主容器外。
更奇怪的是，为flex项目添加边距可以修复整个事情，我不明白这是怎么发生的（我一定在做一些愚蠢的事情）。 甚至可以在'.flex-item'规则中添加一些边框或内边距。
.flex-item{
margin: 5px;
}
这是JS小提琴。 您可以尝试在CSS中取消注释'.flex-item'规则以查看正在发生的事情。
我懒得添加任何前缀（因为几乎每个新的浏览器都支持它），但是在最新的FF，IE和chrome中这个问题是相同的。
第二和第三个元素的宽度为0，因此它们可以放在任何地方。
这就是他们留在第一线的方式。
只需设置1px的基础，他们将在第二行
*{
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