CODEWITHSUNDEEP
htmlcssflexbox
UltraSonja
UltraSonja

Reputation: 891

Flexbox not displaying full width of page

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>

Upvotes: 0

Views: 153

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

You can use also use flex-direction column:

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

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115047

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

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

Jsfiddle Demo

Upvotes: 2

Related Questions