title: Flex container won't expand to fit content in IE
body: <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>