html - flex items ignoring width

Question

I've reordered some elements in my html using flexbox in the responsive design of a website which works fine but the elements then won't resize properly.

At a breakpoint I have applied a class of flex to the home-promos div and reordered the elements. This works correctly.

The problem then arises when I try to resize the div's to percentage widths. They will only resize up to a certain point, such as 50% and then won't get any bigger.

Is anyone who is better with flexbox than myself able to tell me what the issue is?

.home-promos {
  display: flex;
}
.home-promo-center {
  order: 1;
}
.home-promo-left {
  order: 2;
}
.home-promo-right {
  order: 3;
}

<div class="home-promos">
  <div class="home-promo-left">
    <div class="promo-left-content">
      *content*
    </div>
  </div>
  <div class="home-promo-center">
    <div class="promo-center-content">
      *content*
    </div>
  </div>
  <div class="home-promo-right">
    <div class="promo-right-content">
      *content*
    </div>
  </div>
</div>

Answer 1

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:

• flex-direction: row - flex items will align horizontally
• justify-content: flex-start - flex items will stack at the start of the line
• flex-wrap: nowrap - flex items are forced to stay in a single line
• flex-shrink: 1 - flex items are allowed to shrink

Note the last two settings.

Your three divs are forced to remain in a single line. Hence, their combined width is limited to the width of the container.

Also, they are allowed to shrink, which prevents them from overflowing the container. This also limits their width.

To apply whatever width you want to each flex item you can override these initial settings with:

1. flex-wrap: wrap - now there's more space because flex items can break to new lines
2. flex-shrink: 0 - now there's more space because flex items will not shrink and can overflow their container if necessary