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, i.e. 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>