html - Flexbox 不显示页面的全宽

Question

我正在尝试使用 Flexbox 创建我自己的网格。我不想使用 Bootstrap 或任何其他框架，所以请不要链接它们中的任何一个。

在我的 flex-container 中，我想显示两个部分，它们都是页面宽度的 100%。因此，一个部分应位于另一部分之上。相反，即使我明确定义了 100%，每个部分都被赋予了页面宽度的 50%。我不知道为什么会这样。浏览器的开发者工具也没有让我得出任何结论。

我在 jsFiddle 中重建了问题.如果我将一个部分定义为页面宽度的 7/12，将另一个部分定义为页面宽度的 5/12，我会得到预期的结果。

HTML

<div class="flex-container">
    <div class="flex-12">
        <h4>Title</h4>    
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
    </div>
    <div class="flex-12">
        <h4>Title 2</h4>
    </div>
</div>

Answer 1

需要告诉容器允许包装，因为默认是 nowrap。

.flex-container {
    display: flex;
    flex-wrap:wrap;
}

Jsfiddle Demo