无法将 flexbox 子项的宽度设置为 100%

Question

我正在学习 CSS flexbox，并且正在做一个简单的布局，我希望第一个 flex 子项以父级的 100% 宽度显示，其余的 flex 项包裹在下面。此外，包裹的 flex 项目应该以特定的比例占据宽度（易于使用 'flex' 属性设置）。

为此，我将第一个弹性项目的“flex-basis”属性设置为 100%，并将下一个 2 的弹性属性设置为我想要的比率。以下是相关 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-item' 规则中添加一些边框或填充也是有效的。

.flex-item{
    margin: 5px;
}

这里是JS Fiddle。您可以尝试取消注释 CSS 中的“.flex-item”规则以查看发生了什么。

我懒得不添加任何前缀（因为几乎每个新浏览器都支持它），但问题在最新的 FF、IE 和 chrome 上都是一样的。

Answer 1

第二个和第三个元素的宽度为 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 

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

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