内容简介：翻译自：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之间是否存在显着差异？
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中的内容》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Spring源码解析：高级容器的扩展内幕
- PCF 2.0平台扩展：包含容器和Serverless
- 译 - Spring 核心技术之 Spring 容器扩展点
- 谁说docker-compose不能水平扩展容器、服务多实例？
- 红帽Ansible Tower 3.3面世，加强控制、集成、可扩展性和容器支持
- 【php 扩展开发】扩展生成器
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
