Flexbox on Ie11: Image Stretched for No Reason

Flexbox on IE11: image stretched for no reason?

to avoid this funny behavior, you may reset the flex-shrink property.

This looks like a bug, despite what Microsoft says:

<'flex-shrink'>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

If omitted, the element's negative flexibility is "0". A negative value is not valid.

Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx

img {
max-width: 100%;
flex-shrink: 0;
}

img {

max-width: 100%;

flex-shrink: 0;

}

.latest-posts {

margin: 30px auto;

}

article.post-grid {

width: 375px;

float: left;

margin: 0 25px 100px 0;

padding-bottom: 20px;

background-color: #fff;

border: 1px solid #f3f3f3;

border-radius: 2px;

font-size: 14px;

line-height: 26px;

display: flex;

flex: 1 0 auto;

flex-direction: column;

justify-content: flex-start;

align-content: flex-start;

}

article.post-grid .article-content {

padding: 20px 35px;

}
<div class="latest-posts">

<article class="post-grid">

<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />

<div class="article-content">

<h2>THIS IS POST TITLE</h2>

<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>

</div>

</article>

<article class="post-grid">

<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />

<div class="article-content">

<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>

<p>Recommend new contented intention improving bed performed age.</p>

</div>

</article>

<article class="post-grid">

<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="Sample Image" />

<div class="article-content">

<h2>SHORT TITLE</h2>

<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>

</div>

</article>

</div>

Internet Explorer stretches image in flexbox

IE is notorious for having many flexbugs. It's reliable for very simple flex layouts. But with even the slightest bit of complexity, IE requires "special attention" (i.e., ugly hacks).

In this particular case, it appears IE requires a height limitation on the parent of the image:

Instead of this:

.below { }

img {
width: 60%;
max-width: 100%;
height: auto;
vertical-align: middle;
}

Try this:

.below {
flex: 0 0 200px; /* flex-basis: 200px (demo value only) */
}

img {
height: 100%;
/* flex: 0 0 100%; <--- this should work also, but it doesn't */
}

revised fiddle

Why does flexbox stretch my image rather than retaining aspect ratio?

It is stretching because align-self default value is stretch.
Set align-self to center.

align-self: center;

See documentation here:
align-self

max-width of image not working in flexbox for IE 11 but works on google chrome

IE browser has some issues with Flex. It is not able to calculate the values properly with flex.

(1) I suggest you replace max-width with width in .detail img class.

(2) I suggest you replace flex: 1 0 0; with flex: 0 0 auto; in .detail class.

Edit:-

Added img tag inside one extra div solved the issue as informed by @Xegara. It also worked with max-width For IE 11 browser.

Modified code:

<!DOCTYPE html>

<html>

<head>

<script src="script.js"></script>

<style>

body {

width: 100%;

}



.extra_div{

width: 100%;

}

.element {

display: flex;

flex-direction: row;

width: 100%;



}



.name {

display: flex;

align-items: center;

justify-content: center;

flex: 0 0 100px;

font-weight: bolder;

}



.detail-wrapper {

display: flex;

flex-direction: column;

/*flex: 0 0 auto;*/



width: 100%;

}



.detail {

display: flex;

/*flex: 1 0 0;*/

flex: 0 0 auto; /*-------------------------made change here */

align-items: center;

justify-content: center;

flex-wrap: wrap;

}



.detail img {

max-width: 100%; /*-------------------------made change here */

}



.name, .detail {

border: 1px solid;

margin: 8px;

padding: 8px;

text-align: center;

word-break: break-word;

}

</style>

</head>

<body>

<div class="element">

<div class="name">name</div>

<div class="detail-wrapper">

<div class="detail">

<div class="extra_div">

<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />

</div>

</div>

<div class="detail">

<a href="#">url</a>

</div>

</div>

</div>

</body>

</html>

IE 11: Image doesn't scale down correctly within flexbox

IE11 seems to have some trouble with the initial value of the flex-shrink property. If you set it to zero (it is initially set to 1), it should work:

div.outer {

width: 400px;

display: flex;

flex-direction: column;

justify-content: space-around;

}

div.inner {

flex-shrink: 0;

width: 100%;

border: 1px solid red;

}

img {

width: 100%;

height: auto;

}
<div class="outer">

<div class="inner">

<img src="http://placehold.it/480x360">

</div>

<div class="inner">

<img src="http://placehold.it/480x360">

</div>

</div>

Flex-grow in IE11 doesn't vertically stretch

Seems IE11 has an issue with only having min-height.

Try adding a base height.

.p{
display: flex;
min-height:100%;
height: 100%;
}

body,

html {

background-color: red;

min-height: 100%;

height: 100%;

padding: 0;

margin: 0;

}

.p {

display: flex;

min-height: 100%;

height: 100%;

}

.c1 {

flex: 1;

background-color: gray;

}
<div class="p">

<div class="c1">

asdasd

</div>

</div>

Why does wrapping an image with a div in a flexbox scale it correctly but img item doesn't scale?

Does this do what you need?

Markup:

<body>
<div class="stack">
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
<img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>
</body>

CSS:

.stack {
display:flex;
}
.stack img {
align-self:center;
width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/



Related Topics



Leave a reply



Submit