How to fix column height error in IE
In IE, I have an issue where my flex column is stretched for unknown reasons. I need the height and width of the image of each flex item to always be the same and also responsive, so I need them 100%. I also need a flex footer that will always be at the same level as the others, sticking to the bottom of the container, no matter if the flex name has more than 1 line.
.flex-container {
display: flex;
border: 1px solid red;
}
.flex-item-wrapper {
display: flex;
border: 1px solid green;
flex-direction: column;
width: 185px;
}
.link-spanner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.flex-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: auto;
}
.image-container {
margin-top: 5px;
position: relative;
width: 100%;
}
img {
height: 100%;
width: 100%;
}
.flex-item-name {
max-width: 100%;
text-align: center;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item-wrapper">
<a href='#' class="link-spanner"></a>
<div class="flex-header">
<div class="image-container">
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</div>
</div>
<div class="flex-name">Bingobongo Bongobingobongo</div>
<div class="flex-footer">
<button>submit</button>
</div>
</div>
<div class="flex-item-wrapper">
<a href='#' class="link-spanner"></a>
<div class="flex-header">
<div class="image-container">
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</div>
</div>
<div class="flex-name">Bingobongo Bongo</div>
<div class="flex-footer">
<button>submit</button>
</div>
</div>
<div class="flex-item-wrapper">
<a href='#' class="link-spanner"></a>
<div class="flex-header">
<div class="image-container">
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</div>
</div>
<div class="flex-name">Bingobongo Bongobingobongo</div>
<div class="flex-footer">
<button>submit</button>
</div>
</div>
</div>
</div>
source to share
In addition to this post / answer , if you add min-height: 1px;
in .flex-header
and .image-container
, it will work in IE11 in your case as well ..
.. and I don't know why either, although according to this Microsoft bug report it does force IE to recalculate the dimensions based on the image.
.flex-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: auto;
min-height: 1px;
}
.image-container {
margin-top: 5px;
position: relative;
width: 100%;
min-height: 1px;
}
In fact, it also works if you add -ms-flex-negative: 0;
to .flex-header
and.image-container
source to share
I have a similar problem for you: I have two flex items stacked in a column and both have an image inside it, like this:
<article style="display: flex, flex-direction: column">
<div id="topbar">
<img src="..." id="topbar-banner">
</div>
<div id="content">
<img src="..." id="background-img">
</div>
<article>
Ideally, I want the two columns to stack on top of each other, and each flex item has the same height as its child. In all browsers except IE, it works fine; but IE has some free space below #topbar-banner
and above the bottom #topbar
, and it gets bigger if you narrow the page vertically.
I tried LGSon's answer and added -ms-flex-negative: 0
in a #topbar
(div with an unwanted space in it) and it upset my problem by removing the unwanted space. Like this:
<div id="topbar" style="-ms-flex-negative: 0">
Unfortunately, I can't find any official documentation on what it means -ms-flex-negative
, but I've seen people say it's equivalent flex-shrink
.
I am using IE11; according to Microsoft's documentation on flexbox , I shouldn't use the vendor prefix for IE11 now:
Internet Explorer 11 no longer supports the Microsoft vendor prefix ("-ms-") version of flexbox properties. Instead, you should use unprefixed names, which are preferred for standards compliance and future compatibility.
On the other hand, this vendor prefix fixes my problem so far no one else has done. So use it as you see fit; may be worth it if no other alternatives exist.
source to share
you just need to use the alignment classes (.align-items-center or .align-self-center etc.), make sure you don't use the .my-auto class to vertically align center items which works fine in chrome but not in IE. Add the class .align-items-center for flex container (.row) or .align-self-center for flex-children (.col-- etc.).
source to share