Flex container won't expand to fit content in IE [duplicate]

Question

I'm having trouble with <div> heights in IE (specifically IE11). Works fine in Chrome.

So I'm essentially loading in processed PHP results with jQuery.html() and in IE my page wrap doesn't seem to fit the fill length of the page. I believe I've narrowed this down to:

<main id="place_results_wrap">

The height of that seems to shrink as soon as the following section and contents within are loaded in with jQuery.html().

<section class="place_results">

As part of the jQuery load, I'm using the following code which fixes the height in Chrome. I believe it's the html auto height that resolves it.

    $("html").css('height','auto');
    $("body, #page_wrap").css('min-height','100%');

No joy in IE :(

Please could somebody give me a hand?

EDIT: This seems to be related to flex: 1 on the place_results_wrap. If I use flex-grow: 1 instead it seems to expand as expected. Does anyone know why this would be? Is there a significant difference between flex:1 and flex-grow:1?

Fiddle

a,
a:hover {
  text-decoration: none;
}
html,
body {
  height: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  font-size: 16px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#page_wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  background: #fff;
  text-align: center;
  padding: 1.250em;
}
@media screen and (min-width: 900px) {
  #content {
    min-height: 15.05em;
  }
}
header h1 {
  font-size: 6em;
  font-weight: 400;
  color: #655e5e;
  margin: 0;
  display: inline-block;
}
@media screen and (min-width: 605px) and (max-width: 900px) {
  header h1 {
    font-size: 3.5em;
  }
}
@media screen and (min-width: 340px) and (max-width: 605px) {
  header h1 {
    font-size: 3em;
  }
}
@media screen and (max-width: 340px) {
  header h1 {
    font-size: 2em;
  }
}
header hr {
  max-width: 36em;
  margin-bottom: 0px;
}
header .fa-map-marker {
  color: #ec3b3b;
  font-size: 1.2em;
}
#refinement {
  padding: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0.625em;
}
#refinement form {
  display: flex;
  justify-content: center;
}
.form_component {
  margin: 0 0.4em;
  display: none;
}
.form_component i.fa {
  font-size: 1.4em;
  color: #655e5e;
}
main {
  background: #eaeaea;
}
#content {
  text-align: center;
  background: #655e5e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 19.8em;
}
@media screen and (max-width: 900px) {
  #content {
    display: none;
  }
}
#content h2 {
  color: #fff;
  font-weight: 400;
  font-size: 3em;
  margin: 0;
}
@media screen and (max-width: 415px) {
  #content h2 {
    font-size: 2em;
  }
}
#content i.fa-globe {
  font-size: 14em;
  color: #fff;
}
@media screen and (max-width: 415px) {
  #content i.fa-globe {
    font-size: 10em;
  }
}
#place_results_wrap {
  flex: 1;
  min-height: 6.25em;
}
#place_results_wrap section h3 {
  font-weight: 400;
}
#place_results_wrap h3.placeholder {
  text-align: center;
}
.place_results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.25em 0;
}
.next_page {
  padding: 0 1.250em;
  width: 100%;
  text-align: center;
}
.next_page button {
  background-color: #fff;
  border: none;
  color: #655e5e;
  padding: 0.3125em 2em;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  border-radius: 1.25em;
}
.next_page button:hover {
  background-color: #f6f6f6;
}
.place {
  width: 24em;
  height: 27em;
  margin: 1.25em;
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  -moz-box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  box-shadow: 5px 6px 20px 0px rgba(158, 155, 158, 0.75);
  background: #fff;
}
@media screen and (max-width: 1920px) {
  .place {
    width: 30%;
  }
}
@media screen and (min-width: 900px) and (max-width: 1366px) {
  .place {
    width: 45%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .place {
    width: 44%;
  }
}
@media screen and (min-width: 415px) and (max-width: 760px) {
  .place {
    width: 90%;
  }
}
@media screen and (max-width: 415px) {
  .place {
    width: 90%;
  }
}
.place_image {
  width: 100%;
  height: 14.0625em;
  background-size: cover !important;
  background-clip: content-box !important;
}
.place_description {
  padding: 0.625em;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  background: #fff;
}
.distance_container p.distance {
  font-weight: 600;
}
.place_description p,
.place_description a {
  color: #655e5e;
  font-weight: 400;
  margin: 0;
}
.place_description .place_open p {
  margin: 0;
  color: #49b51c;
}
.place_description i.fa {
  width: 1.25em;
}
.place_title {
  flex: 1 1 0;
}
.place_title h3 {
  color: #655e5e;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  font-size: 1.4em;
  line-height: 1.3;
}
@media screen and (max-width: 415px) {
  .place_title h3 {
    font-size: 1.2em;
  }
}
.rating_container {
  width: 100%;
}
.rating_bar {
  width: 6.875em;
  height: 1.313em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
  background-repeat: repeat-x;
  background-position: 0 0;
}
.rating {
  height: 1.313em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
  background-position: 0 100%;
  background-repeat: repeat-x;
}
.place_description .place_location {
  margin-bottom: 0.625em;
}
.place .distance_container,
.place .vicinity_container,
.place .place_phone_container {
  display: flex;
}
#load_container {
  padding: 1.25em 0.625em;
  text-align: center;
}
#load i.fa-spin {
  font-size: 4em;
  color: #655e5e;
}
#jquery_placeholder {
  display: none;
  width: 100%;
}
footer {
  padding: 1.25em;
  text-align: right;
  background: #eaeaea;
  min-height: 3.9em;
}
img#google {
  width: 10em;
}
#error {
  padding: 1.25em;
  background: #ec3b3b;
}
#error p {
  font-size: 1.2em;
  margin: 0;
  color: #fff;
  text-align: center;
}
#error i.fa-exclamation-circle {
  color: #fff;
}

<body style="min-height: 100%;">
  <div id="page_wrap" style="min-height: 100%;">
    <header>
      <a href="/"><h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1></a>
      <hr>
      <section id="refinement">
        <form>
          <section class="form_component" style="display: block;">
            <select id="narrow">
              <option value="select" selected="" disabled="">Please Select</option>
              <option value="lodging">Accommodation</option>
              <option value="accounting">Accountants</option>
              <option value="aquarium">Aquarium</option>
              <option value="art_gallery">Art Gallery</option>
              <option value="atm">Cash Machine</option>
              <option value="bakery">Bakery</option>
              <option value="bank">Bank</option>
              <option value="bar">Bar</option>
              <option value="beauty_salon">Beauty Salon</option>
              <option value="book_store">Book Store</option>
              <option value="bowling_alley">Bowling Alley</option>
              <option value="bus_station">Bus Station</option>
              <option value="cafe">Cafe</option>
              <option value="campground">Campsite</option>
              <option value="car_dealer">Car Dealer</option>
              <option value="car_rental">Car Rental</option>
              <option value="car_repair">Car Repair</option>
              <option value="car_wash">Car Wash</option>
              <option value="church">Church</option>
              <option value="city_hall">Town Hall</option>
              <option value="clothing_store">Clothes Store</option>
              <option value="convenience_store">Convenience Store</option>
              <option value="dentist">Dentist</option>
              <option value="department_store">Department Store</option>
              <option value="doctor">Doctor</option>
              <option value="electrician">Electrician</option>
              <option value="electronics_store">Electronics Store</option>
              <option value="florist">Florist</option>
              <option value="furniture_store">Furniture Store</option>
              <option value="gym">Gym</option>
              <option value="hair_care">Hairdressers</option>
              <option value="hardware_store">Hardware Store</option>
              <option value="home_goods_store">Home Goods Store</option>
              <option value="hospital">Hospital</option>
              <option value="jewelry_store">Jewelry Store</option>
              <option value="laundry">Laundry</option>
              <option value="lawyer">Lawyer</option>
              <option value="library">Library</option>
              <option value="locksmith">Locksmith</option>
              <option value="meal_delivery">Takeaway (Delivery)</option>
              <option value="meal_takeaway">Takeaway (Collection)</option>
              <option value="movie_theater">Cinema</option>
              <option value="moving_company">Moving Company</option>
              <option value="museum">Museum</option>
              <option value="night_club">Night Club</option>
              <option value="painter">Painter</option>
              <option value="park">Park</option>
              <option value="parking">Parking</option>
              <option value="pet_store">Pet Store</option>
              <option value="gas_station">Petrol Station</option>
              <option value="pharmacy">Pharmacy</option>
              <option value="plumber">Plumber</option>
              <option value="post_office">Post Office</option>
              <option value="real_estate_agency">Estate Agent</option>
              <option value="restaurant">Restaurant</option>
              <option value="roofing_contractor">Roofing Contractor</option>
              <option value="rv_park">Caravan Park</option>
              <option value="school">School</option>
              <option value="shoe_store">Shoe Store</option>
              <option value="shopping_mall">Shopping Mall</option>
              <option value="spa">Spa</option>
              <option value="storage">Storage</option>
              <option value="store">Store</option>
              <option value="taxi_stand">Taxi Stand</option>
              <option value="train_station">Train Station</option>
              <option value="transit_station">Transit Station</option>
              <option value="travel_agency">Travel Agency</option>
              <option value="university">University</option>
              <option value="veterinary_care">Veterinary Care</option>
              <option value="zoo">Zoo</option>
            </select>
          </section>
          <section class="form_component" style="display: block;">
            <input id="driving" type="radio" name="travelmode" value="Driving" checked=""> <i class="fa fa-car" aria-hidden="true"></i>
          </section>
          <section class="form_component" style="display: block;">
            <input id="walking" type="radio" name="travelmode" value="Walking"> <i class="fa fa-male" aria-hidden="true"></i>
          </section>
        </form>
      </section>
    </header>

    <section id="content">
      <h2>Let's explore!</h2>
      <i class="fa fa-globe" aria-hidden="true"></i>
    </section>

    <main id="place_results_wrap">
      <section class="place_results">



        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 1</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-TRRLZqMrJzg/VNDfOiV8fRI/AAAAAAAAAA4/OIKniPQOWVg1yYV75qMx63VMzzvS8MKaA/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 2</h3>
            </section>
            <section class="place_location">



              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-H17v8cnJ1Go/V4xy3Km4nRI/AAAAAAAAAFc/BkMyDnQkir4cVXdBiQAS_NZ-PqEmLhDcQCLIB/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 3</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 4</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(/assets/i/placeholder.jpg) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 5</h3>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>


        <section class="place">

          <section class="place_image" style="background: url(https://lh3.googleusercontent.com/-dgMNP6i8md0/VhofnGwXmZI/AAAAAAAAAHE/mr2kDL_U8uIYbGy5d_siC1vwiNExTLieA/s1600-w400/) 50% 50% no-repeat">
            <!-- Place Image -->
          </section>


          <section class="place_description">
            <section class="place_title">
              <h3>Place 6</h3>
              <section class="place_open">

              </section>
            </section>
            <section class="place_location">

              <section class="distance_container">
                <p><i class="fa fa-location-arrow" aria-hidden="true"></i>
                </p>

              </section>

              <section class="vicinity_container">
                <p><i class="fa fa-map-marker" aria-hidden="true"></i>
                </p>

              </section>

            </section>
            <section class="place_phone_container">
              <p><i class="fa fa-phone" aria-hidden="true"></i>
              </p>
              <p></p>
            </section>
          </section>
        </section>
      </section>
    </main>

    <footer class="footer">
      <img id="google" src="/assets/i/google.png" alt="Powered by Google">
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/main.js"></script>
    <script src="/assets/js/geo.js"></script>
  </div>

Answer 1

IE11 has lots of problems with flexbox. It certainly doesn't work well with flex: 1.

In your code, you have:

#place_results_wrap {
    flex: 1;
    min-height: 6.25em;
}

The flex shorthand computes to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0% (in Chrome) and flex-basis: 0px (in IE11)

These flex-basis values fail in IE11.

Instead of flex: 1, try using flex-basis: auto.