Flex container won't expand to fit content in IE
<p>I'm having trouble with <code>&lt;div&gt;</code> heights in IE (specifically IE11). Works fine in Chrome.</p>

<p>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:</p>

<pre><code>&lt;main id="place_results_wrap"&gt;
</code></pre>

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

<pre><code>&lt;section class="place_results"&gt;
</code></pre>

<p>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.</p>

<pre><code>    $("html").css('height','auto');
    $("body, #page_wrap").css('min-height','100%');
</code></pre>

<p>No joy in IE :(</p>

<p>Please could somebody give me a hand?</p>

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

<p><a href="https://jsfiddle.net/cmh91asq/4/" rel="noreferrer">Fiddle</a></p>

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

    &lt;section id="content"&gt;
      &lt;h2&gt;Let's explore!&lt;/h2&gt;
      &lt;i class="fa fa-globe" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/section&gt;

    &lt;main id="place_results_wrap"&gt;
      &lt;section class="place_results"&gt;



        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 1&lt;/h3&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;

              &lt;section class="distance_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;


        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 2&lt;/h3&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;



              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;


        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 3&lt;/h3&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;

              &lt;section class="distance_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;


        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 4&lt;/h3&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;

              &lt;section class="distance_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;


        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 5&lt;/h3&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;

              &lt;section class="distance_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;


        &lt;section class="place"&gt;

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


          &lt;section class="place_description"&gt;
            &lt;section class="place_title"&gt;
              &lt;h3&gt;Place 6&lt;/h3&gt;
              &lt;section class="place_open"&gt;

              &lt;/section&gt;
            &lt;/section&gt;
            &lt;section class="place_location"&gt;

              &lt;section class="distance_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

              &lt;section class="vicinity_container"&gt;
                &lt;p&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/p&gt;

              &lt;/section&gt;

            &lt;/section&gt;
            &lt;section class="place_phone_container"&gt;
              &lt;p&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;
      &lt;/section&gt;
    &lt;/main&gt;

    &lt;footer class="footer"&gt;
      &lt;img id="google" src="/assets/i/google.png" alt="Powered by Google"&gt;
    &lt;/footer&gt;

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