内容简介：翻译自：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 扩展开发】扩展生成器
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
RESTful Web Services Cookbook
Subbu Allamaraju / Yahoo Press / 2010-3-11 / USD 39.99
While the REST design philosophy has captured the imagination of web and enterprise developers alike, using this approach to develop real web services is no picnic. This cookbook includes more than 10......一起来看看 《RESTful Web Services Cookbook》 这本书的介绍吧!
