Why isn't flex element wrapping to second row with flex-wrap:wrap?

I want to have a container flex div with 3 elements per row, problem is when I add the fourth element (it should automatically wrap to the second row), instead it stays on a single row and shrinks the other elemets. I enabled wrapping with flex-wrap: wrap;

Here is my code:

<div class="border" style="width:100%; height:auto; position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start; ">
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HowMuchExerciseDoesMyDogNeed-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HomeToRoamFindTheRightDogForYourApartment-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
</div>

Solution

First off, you misspelled it with a w in flew-wrap:wrap; should be flex-wrap:wrap;

Then you can/need to drop flex-flow:row;, it is the default, but is also set the nowrap back, being positioned after the flex-wrap property in the style.

Finally, to fit 3 items in a row, you need to subtract margin/padding from the set width, i.e. something like this flex:1 1 calc(33.33% - 30px);

Note, may I also recommend you switch to classes and external CSS, as having them inline is so much more difficult to manage and more error prone as it is harder to follow.

Note 2, calc() in the flex shorthand doesn't work in IE, there you need to use the longhand flex-basis, i.e. flex-basis: calc(33.33% - 30px);

Stack snippet

<div class="border" style="width:100%; height:auto; position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start;">
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HowMuchExerciseDoesMyDogNeed-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
	<a href="#"><h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HomeToRoamFindTheRightDogForYourApartment-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:0 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
</div>