html – Flex容器不会扩展以适应IE中的内容

栏目: Html · 发布时间: 5年前

内容简介：翻译自：https://stackoverflow.com/questions/39192995/flex-container-wont-expand-to-fit-content-in-ie

参见英文答案 > flex property not working in IE 5个

>             Image behavior within flexbox (rows embedded in columns) 2个

我遇到了<

div>的问题IE中的高度(特别是IE11).适用于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" 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>

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中)

这些弹性基础值在IE11中失败.

而不是flex：1,尝试使用flex-basis：auto.

翻译自：https://stackoverflow.com/questions/39192995/flex-container-wont-expand-to-fit-content-in-ie


以上所述就是小编给大家介绍的《html – Flex容器不会扩展以适应IE中的内容》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
.NET框架程序设计

.NET框架程序设计

（美）Jeffrey Richter、（美）Francesco Balena / 李建忠 / 华中科技大学出版社 / 2004-1 / 54.00元

Microsoft.NET框架为简化开发与卫联网无缝连接的应用程序和组件提供了强大的技术支持，如ASP.NET Web窗体、XML Web服务以及Windows窗体。本书的目的在于展示.NET框架中公共语言运行库存的核心内容。全书由两位广受尊敬的开发者/作者完成，并假设读者理解面向对象程序设计的基本概念，如数据抽象、继承和多态。书中内容清楚地解释了CLR的扩展类型系统，CLR如何管理类型的行为，以......一起来看看 《.NET框架程序设计》 这本书的介绍吧!

码农工具
Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3