Flex 容器不会扩展以适应 IE 中的内容 [重复]

Posted 2023-03-05

【中文标题】Flex 容器不会扩展以适应 IE 中的内容 [重复]

【英文标题】：Flex container won't expand to fit content in IE [duplicate]

【发布时间】：2017-01-04 16:51:22

【问题描述】：

我在 IE（特别是 IE11）中遇到<div> 高度问题。在 Chrome 中运行良好。

所以我实际上是在使用 jQuery.html() 加载经过处理的 php 结果，而在 IE 中，我的页面换行似乎不适合页面的填充长度。我相信我已将其范围缩小到：

<main id="place_results_wrap">

使用 jQuery.html() 加载以下部分和其中的内容后，它的高度似乎会缩小。

<section class="place_results">

作为 jQuery 加载的一部分，我正在使用以下代码来修复 Chrome 中的高度。我相信这是解决它的html自动高度。

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

在 IE 中没有乐趣 :(

请有人帮帮我吗？

编辑：这似乎与place_results_wrap 上的flex: 1 有关。如果我改用flex-grow: 1，它似乎会按预期扩展。有谁知道为什么会这样？ flex:1 和 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" >
    </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>

【问题讨论】：

可能是 Flexbox 上的 IE 错误之一。 github.com/philipwalton/flexbugs

【参考方案1】：

IE11 有很多关于 flexbox 的问题。它肯定不适用于flex: 1。

在您的代码中，您有：

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

flex 速记计算为：

flex-grow: 1 flex-shrink: 1 flex-basis: 0%（在 Chrome 中）和 flex-basis: 0px（在 IE11 中）

这些 flex-basis 值在 IE11 中失败。

请尝试使用flex-basis: auto，而不是flex: 1。

【讨论】：

由于flex: 1 同时设置了flex-grow 和flex-shrink，我的解决方法是使用flex: 1 1 auto;。这样grow 和shrink 也会被相应地设置。否则，您的建议将非常有效@michael_b！

除了flex: 1;之外，解决方案不应该是使用flex-basis: auto;吗？

或者只是flex: auto。在此处查看细分：w3.org/TR/css-flexbox-1/#flex-common@Trent