Flexbox无法显示页面的全部宽度

Question

I'm trying to use Flexbox to create my own grid. I don't want to use Bootstrap or any other framework, so please don't link any of them.

In my flex-container , I want to display two sections which are both 100% of the page's width. So one section should be positioned on top of the other. Instead, each section is being given 50% of the page's width even when I explicitly defined 100%. I have no idea why this is happening. The browser's developer tools don't lead me to any conclusions either.

I reconstructed the problem in a jsFiddle . I get the expected result if, let's say, I define one section to be 7/12 the page's width and the other section to be 5/12 the page's width.

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

Need to tell the container to permit wrapping as the default is nowrap .

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

Jsfiddle Demo

Answer 2

You can use also use flex-direction column:

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