Kévin_Bransard
Reputation: 686
Flexbox max-height issue with IE11
I'm trying to code a search menu separated in three parts. Each part will have a scrollbar if there's not enough vertical space for the results to display.
In Chrome and Firefox, each menu displays its scrollbar, but on IE11, the menus overlap the wrapper.
I've coded a sample which works on Chrome and Firefox (Firefox was tricky, I needed to add overflow: hidden on multiple levels of the menu).
.flex-wrapper {
display: flex;
margin: 20px auto;
width: 1184px;
max-height: 80vh;
border: 2px solid red;
min-height: 150px;
}
.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;
}
.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>Am I missing something on IE 11 ?
Upvotes: 3
Views: 12996
Answers (1)
Michael Benjamin
Reputation: 371083
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:
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:
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>jsFiddle demo
Upvotes: 13
Related Questions
- IE11 vertical flex-box layout with height:auto and overflow doesn't work
- Flexbox children overflow parent with max-height specified on IE
- IE 11 issue with flexbox item with max-width
- Flexbox not filling height in IE11
- max-width not functioning correctly in flex-box on IE11
- Flexbox max-height in IE and Safari
- flexbox with max-height in IE10
- IE11 flexbox column heights issue
- IE11 calculates the height of parent flex container incorrectly
- Flexbox issues with IE 11