Flexbox not full width

Question

I have a basic flexbox like this..

 .masonry_container { display: flex; } .masonry_left_col { border: 1px solid grey; } .masonry_right_col { border: 1px solid grey; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Why does it not extend to the full width?

I know this is probably really simple but i can't work it out, where am I going wrong?

Answer 1

The container actually is 100% wide, ie spans the full width of the window. But with the default flex settings, its children will simply align left and will be only as wide as their contents.

However, if you apply flex-grow: 1; to the child elements to allow them to get wider, they will stretch and fill the full width of the container.

 .masonry_container { display: flex; } .masonry_left_col { border: 1px solid grey; flex-grow: 1; } .masonry_right_col { border: 1px solid grey; flex-grow: 1; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Or, if you just want the flex items to go full left and right inside the container without stretching, add justify-content: space-between to the container

 .masonry_container { display: flex; justify-content: space-between; } .masonry_left_col { border: 1px solid grey; } .masonry_right_col { border: 1px solid grey; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Answer 2

The flex container does extend the full width – it's a block level element.

 .masonry_container { display: flex; border: 1px solid red; } .masonry_container > div { border: 1px solid grey; background-color: lightgreen; }

 <div class="masonry_container"> <div class="masonry_left_col">Content</div> <div class="masonry_right_col">Content</div> </div>

But the flex items have two default settings that prevent automatic expansion:

• flex-basis: auto
• flex-grow: 0

This means that items take the length of their content and do not consume free space.

For the items to expand you need to override the flex-grow default value.

 .masonry_container { display: flex; border: 1px solid red; } .masonry_container > div { flex-grow: 1; border: 1px solid grey; background-color: lightgreen; }

 <div class="masonry_container"> <div class="masonry_left_col">Content</div> <div class="masonry_right_col">Content</div> </div>

Answer 3

You can specify how wide you want you flex children to grow . Simply set flex-grow: 1 for both children if you want each item to share the same width.

 .masonry_container { display:flex; } .masonry_left_col { border:1px solid grey; flex-grow: 1; /* 33% width relative to right column */ } .masonry_right_col { border:1px solid grey; flex-grow: 2; /* 66% width relative to left column */ }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Answer 4

Please also look at the containing container

that should be container-fluid (so the parent to the flex container will span 100%)