不显示页面的全宽度的Flexbox

Question

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

在我的flex-container中，我想显示两个部分，它们都是页面宽度的100%。因此，一个部分应该放在另一个部分的顶部。相反，即使当我显式地定义 100%时，每个部分也会被赋予页面宽度的50%。我不知道为什么会这样。浏览器的开发工具也不会给我带来任何结论。

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

<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;
}

杰斯德尔·德莫

Answer 2

也可以使用flex方向列：

.flex-container {
    display: flex;
    flex-direction: column;
}