flex container not equally distributing space so that flex items are equally sized

Question

I'm having a problem with flexbox displaying properly in a wrapper.

In my code below you'll see that the middle .wrap container does not equally distribute space so that the individual flex children are equally sized.

I know I must be doing something wrong. I'd appreciate some guidance.

The problem can be found on this page: pennyappealusa.org/hurricanematthew

.wrap {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.info {
  width: auto;
  min-height: 500px;
  color: white;
  text-align: center;
  display: flex;
  position: relative;
}
.info-white {
  width: auto;
  min-height: 500px;
  background: white;
  display: flex;
  position: relative;
}
.item-1 {
  order: 1;
  flex-grow: 1;
}
.item-2 {
  order: 2;
  flex-grow: 1;
}
.item-3 {
  order: 3;
  flex-grow: 1;
}
.item-4 {
  order: 4;
  flex-grow: 1;
}
.item-5 {
  order: 5;
  flex-grow: 1;
}
.item-6 {
  order: 6;
  flex-grow: 1;
}
.callout {
  width: 80%;
  max-width: 380px;
  height: 80%;
  position: relative;
  background: none;
  margin: auto;
}
.cta {
  padding: 3.5em 1.5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: initial;
  flex: initial;
  flex-basis:
}

<div class="flex-container">
  <div class="wrap" style="background-image: url('http://pennyappealusa.org/wp-content/uploads/2016/10/Flickr_-_DVIDSHUB_-_USS_Iwo_Jima_assists_Haiti_after_Hurricane_Tomas_Image_1_of_7.jpg'); background-size: cover; background-position: 70% 30%;">
    <div class="info item-1">
      <div class="callout flex">
        <h3><strong><span style="color: #ffffff; text-shadow: #404040 0px 0px 13px;">Hurricane Matthew is the worst hurricane to make landfall since Hurricane Charley in 2004.</span></strong></h3>
      </div>
    </div>
    <div class="info-white item-2">
      <div class="callout flex">
        <h3><span style="color: #000000;"><strong>Your relief contribution today will make Haiti's ongoing development efforts possible.</strong></span></h3>
        With a nationwide unemployment rate over 40%, natural disasters like Hurricane Matthew<strong> threaten development efforts and thrust individuals and families back into a cycle of poverty.</strong> By providing relief to the victims of Hurricane
        Matthew, we can sustain long-term development projects to help individuals recover their lives.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
  </div>
  <div class="wrap" style="flex-direction: row-reverse;">
    <div class="info-white item-4">
      <div class="callout flex">
        <h3><strong>"There are coastal communities that are under water..." - Jacqueline Charles, Miami Herald</strong></h3>
        2 million people have been advised to evacuate across coastal areas of Florida, Georgia, and South Carolina. Though the hurricane has now been classified as a Category 2, devastating storm surges are expected in the Caribbean and along the southeastern
        United States. We're working with local organizations to do a needs-assessment and provide relief.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
    <div class="info item-3" style="background-image: url('http://i.cdn.turner.com/cnn/interactive/weather/hurricane.tracker/Matthew/Matthew_3DSAT.jpg'); background-size: cover; background-position: 0% 0%;"></div>
  </div>
  <div class="wrap">
    <div class="info item-5" style="background-image: url('http://pennyappealusa.org/wp-content/uploads/2016/10/Hurricane_Matthew_Haiti.jpg'); background-size: cover; background-position: 80% 10%;">
      <div class="gradient" style="position: absolute; width: 100%; height: 100%;"></div>
      <div style="font-size: 12px; color: white; text-shadow: #404040 0px 0px 13px; position: absolute; bottom: 10px; left: 10px;">HECTOR RETAMAL/AFP/Getty Images</div>
      <div class="callout flex">
        <h3><strong><span style="color: #ffffff; text-shadow: #404040 0px 0px 13px;">As an organization, we have already committed funds to assist victims of Hurricane Matthew. Your help is crucial right now.</span></strong></h3>
      </div>
    </div>
    <div class="info-white item-6">
      <div class="callout flex">
        <h3><strong>The global Penny Appeal family has been responding to emergencies since 2009. We're counting on you to help us again.</strong></h3>
        Penny Appeal USA is working with partners on the ground in order to respond to this tragic hurricane in the most effective and impactful way possible. All funds will be used to provide essential assistance in the form of food, water and shelter to help
        the victims rebuild their lives.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="width: 225px; background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
  </div>
</div>

Answer 1

Solution

Instead of this:

.item-1 {
  order: 1;
  flex-grow: 1;
}

.item-2 {
  order: 2;
  flex-grow: 1;
}

.item-3 {
  order: 3;
  flex-grow: 1;
}

.item-4 {
  order: 4;
  flex-grow: 1;
}

.item-5 {
  order: 5;
  flex-grow: 1;
}

.item-6 {
  order: 6;
  flex-grow: 1;
}

Switch all instances of flex-grow: 1 to this:

flex: 0 0 50%;

---

Explanation

flex-grow: 1

This rule tells a flex item to consume any remaining space in the container.

But this doesn't definitively size a flex item because the default setting of flex-basis is auto.

With flex-basis: auto a flex item's initial size will be influenced by the length of its content.

flex: 0 0 50%

With the shorthand flex: 0 0 50% a flex item will not expand (flex-grow: 0), not shrink (flex-shrink: 0), and have a width of 50% (flex-basis: 50%).

This will force two items per row, each taking half the container size, and aligning evenly with items in other rows at all screen sizes.

---

This question illustrates why it's usually better to use the flex shorthand property than individual longhand properties (flex-grow, flex-shrink, flex-basis).

By using the shorthand you can define all three properties, thus overriding initial values as necessary.

From the specification:

7.2. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.