无法将flexboxchild的宽度设置为100%

我正在学习CSS flexbox并且正在做一个简单的布局,我希望第一个flex子项显示100%宽度的父级和rest flex items包装在下面.此外,包裹的弹性项目应以特定比例占据宽度(易于使用'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的问题是相同的.