flex container min-height ignored in IE
IE 10 & 11 have a number of issues with rendering flexbox properly.
Here's one: A flex container doesn't respect the min-height property in these browsers.
A simple solution is to make your flex container also a flex item.
Just add this to your code (no other changes necessary):
body {
display: flex;
flex-direction: column;
}
revised fiddle
More info: https://github.com/philipwalton/flexbugs#flexbug-3
Internet Explorer doesn't honor my min-height: 100% with flexbox
Here is the fix:
HTML
<body>
<header>Header</header>
<main>Here comes the content ...</main>
<footer>Footer</footer>
</body>
CSS
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex-shrink: 0;
}
main {
flex: 1 0 auto;
}
jsfiddle: http://jsfiddle.net/d5syw3dc/
Flexbox row with min-height does not stretch in IE
Its a bug in IE 10-11. In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
More info: https://github.com/philipwalton/flexbugs#flexbug-3
Workaround
Simply wrap the flex container (here it div with classname card) with another flex-container having flex direction column
.ie-fix-wrapper{ display: flex; flex-direction:column; }
.card-wrap { display: block; position: relative;}
a { display: block;}
.card-image-left { flex-direction: row;}
.card { box-sizing: border-box; display: flex; border: 1px solid black; min-height: 200px;}
.card-content { padding: 12px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1;}
.card-text { font-size: 0.875rem; color: #1D1D1D;}
.card-footer { margin-top: 12px;}
.card-image-wrap { overflow: hidden; position: relative;}
h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 4px 0;}
.card-image { width: 100%; background-size: cover; width:80px; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg");}<div class='card-wrap'> <a href='#'> <div class="ie-fix-wrapper"> <div class='card card-image-left'> <div class='image-wrap'> <div class='card-image'> </div> </div> <div class='card-content'> <div class='card-header'> <h3>test title</h3> <div class='card-text'>test subtitlte</div> </div> <div class='card-footer'> <div> <div class='card-footer-monetary'>1000</div> </div> </div> </div> </div> </div> </a></div>Setting min-height in grid container in IE11
It seems that IE has a min-height bug when using CSS Grid. We can use css-tricks to fix it in IE. You could give the parent a grid column container like below:
display: -ms-grid;
-ms-grid-columns: 100%;
Then the min-height property will work in IE.
Flexbox max-height issue with IE11
You have two problems to address in this layout for it to work in Chrome, Safari, Firefox and IE11.
The minimum sizing algorithm on flex items.
A flex item, by default, cannot be smaller than the size of its content. The minimum size is defined in the spec as min-width: auto and min-height: auto.
Some browsers take it upon themselves to adjust this setting (which is why your layout works in Chrome). Other browsers require you to override the default setting (which is what is needed in FF and IE11).
You can override the default with min-width: 0 / min-height: 0, or overflow with any value other than visible.
Add this to your code:
.flex-wrapper .flex-wrapper-inner .column-wrapper {
flex-grow: 1;
display: flex;
overflow: hidden;; /* IE11 & Firefox fix */
}
Here's a more complete explanation:
- Why doesn't flex item shrink past content size?
IE11 is ignoring the `max-height` and `min-height` on your flex container.
In your layout, it appears that IE11 is simply ignoring your max-height and min-height rules. However, these rules appear to work fine on flex items. So make your container also a flex item.
Add this to your code:
body {
display: flex; /* IE11 fix */
}
More information:
- flex container min-height ignored in IE
- https://github.com/philipwalton/flexbugs
body { display: flex; /* IE11 fix */}
.flex-wrapper { display: flex; margin: 20px auto; width: 1184px; max-height: 80vh; border: 2px solid red; smin-height: 150px; flex-shrink: 0; /* override default `flex-shrink: 1` */}
.flex-wrapper .flex-wrapper-inner { display: flex; width: 100%; flex-direction: column;}
.flex-wrapper .flex-wrapper-inner .header { display: flex; flex-shrink: 0; width: 100%;}
.flex-wrapper .flex-wrapper-inner .header H4 { flex: 1;}
.flex-wrapper .flex-wrapper-inner .column-wrapper { flex-grow: 1; display: flex; overflow: hidden;; /* IE11 & Firefox fix */}
.flex-wrapper .flex-wrapper-inner .column { flex: 1; overflow-y: auto;}
.flex-wrapper .flex-wrapper-inner .column H4 { text-align: center;}
.box-results-users .list-group-item { margin: 0;}
.box-results-users .list-group-item IMG { height: 60px; width: 60px;}
.box-results { position: relative;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="flex-wrapper"> <div class="flex-wrapper-inner"> <div class="header"> <h4>Box 1</h4> <h4>Box 2</h4> <h4>Box 3</h4> </div> <div class="column-wrapper"> <div class="column"> <div class="box-results list-group"> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div>
</div> <div class="column"> <div class="box-results"> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a> <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div> </div> <div class="column"> <div class="box-results box-results-users"> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div>
<div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> <div class="media list-group-item"> <div class="media-left"> <a href="#"> <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">User Test</h4> ... </div> </div> </div> </div> </div> </div>IE11 - Flex child takes full height
That is one of IE's flex bugs, the min-height when using flex direction column "bug".
In your case, add display: flex to the body and flex-grow: 1; to the parent (flex-basis: 100% or width: 100% will work as well).
body { display: flex;}
.parent { flex-grow: 1; /* fill horizontal space */ display: flex; flex-direction: column; max-height: 500px;}
.header { flex: 0 0 auto; background: red; height: 50px;}
.content { background: yellow; flex: 1 1 auto; position: relative; overflow-y: scroll;}
.footer { flex: 0 0 auto; background: blue; height: 50px;}
.long-item { height: 2000px;}<div class="parent"> <div class="header">Header</div> <div class="content"> <div class="long-item">Content</div> </div> <div class="footer">Footer</div></div>Flexbox, min-height, margin auto and Internet Explorer
This is a bug in IE's flexbox implementation:
In all other browsers that support flexbox, a
flex-direction:columnbased flex container will honor the containersmin-heightto calculateflex-growlengths. In IE10 & 11-preview it only seems to work with an explicitheightvalue.
Bug report - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)
It appears that this is on Microsoft's radar and will be fixed some point in the future:
Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.
Reply from Microsoft - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)
For now the simple solution is to use height:
.wrapper { border: 1px solid grey; box-sizing: border-box; display: flex; flex-direction: column; height: 300px; padding: 5px;}.element { border: 1px solid grey; height: 35px; margin: 5px;}.element:last-child { margin-top: auto;}<div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div></div>Flex container won't expand to fit content in IE
IE11 has lots of problems with flexbox. It certainly doesn't work well with flex: 1.
In your code, you have:
#place_results_wrap {
flex: 1;
min-height: 6.25em;
}
The flex shorthand computes to:
flex-grow: 1flex-shrink: 1flex-basis: 0%(in Chrome) andflex-basis: 0px(in IE11)
These flex-basis values fail in IE11.
Instead of flex: 1, try using flex-basis: auto.
Related Topics
How to Set Tbody Height With Overflow Scroll
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
An Invalid Form Control With Name='' Is Not Focusable
How to Use the "Required" Attribute With a "Radio" Input Field
Base64 Encoded Images in Email Signatures
Force to Open "Save As..." Popup Open At Text Link Click For Pdf in Html
How to Wrap Text Around a Bottom-Right Div
How to Get This CSS Text-Decoration Override to Work
Does Opacity:0 Have Exactly the Same Effect as Visibility:Hidden
Ie8 Support For CSS Media Query
How to Send Email from HTML Form
Ie8 Issue With Twitter Bootstrap 3
How to Add Default Value For HTML ≪Textarea≫