Flexbox Columns and Ie

flexbox columns and IE

I had a very similar issue with IE11.

Apparently the issue is to do with IE's implementation of the flex property.

In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as
defined in the latest spec.

Source: http://caniuse.com/#feat=flexbox

Explicitly setting the flex property to 1 0 auto remedied the issue for my case.

So anywhere you have the flex property set, update the values to match this explicit format.

Flex box column row issue in Internet Explorer

When using flex: 1;, you're not only setting flex-grow and flex-shrink. You're also setting flex-basis (relative sizing between the elements) to 0%. That's probably what's confusing IE.

Change the flex properties to use auto-sizing (flex: 1 auto;), and it works correctly in IE too:

...
div.field {
display: inline-flex;
flex: 1 auto;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1 auto;
background-color: pink;
}
...

Updated JSFiddle: https://jsfiddle.net/e2jwc371/4/

4-column Flexbox-Layout works great on any browser, besides IE, where it shows only 3 columns in a row

You need to set a max-width equal to your flex-basis for IE11 to render this layout properly.

So, for example:

.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%; max-width: 25%}

Flex-direction: column; not working in IE and Edge

Turns out i just fixed the issue by adding display:block; to my list items.
They had a display:table-cell from the foundation framework that might have caused this problem!

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>

Nested flexbox height issue in IE

This seems to be working:

.flex-row {
display: flex;
flex: 0 0 auto; /*added*/
}

or

.flex-row {
display: flex;
height: 100%; /*added*/
}

See simplified demo:

.flex-list {  display: flex;  flex-direction: column;}.flex-row {  display: flex;  flex: 0 0 auto;}.flex-item {  flex: 1;  border: 1px solid blue;}.picture {  width: 100%;  height: auto;}
<div class="flex-list">  <div class="flex-row">    <div class="flex-item">      <a href='#'>        <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="Sample Image">      </a>    </div>    <div class="flex-item"></div>    <div class="flex-item"></div>    <div class="flex-item"></div>  </div></div>

Making flexbox work in IE11

You can do these 2 things to make it render the same cross browsers:

  • IE has a min-height bug when using flex column direction, adding display: flex to its parent (section) solves that

  • IE also have some issues when it comes to auto margins, so instead of margin-top: auto on the .col-md-4 item, use align-items: flex-end on the parent (row d-flex fHeight)

Updated fiddle

Stack snippet

.section {  display: flex;               /*  added  */}
.row.d-flex.fHeight { align-items: flex-end; /* added */}
.mn120 { min-height: 120px;}
img { max-width: 40%;}
.mh100vh { min-height: 900px;}
/*.col-md-4 { margin-top:auto;}*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="someSection" class="section"> <div class="container d-flex flex-column justify-content-between fHeight mh100vh"> <div class="row"> <div class="col-md-8 offset-2"> <h2 class="section-title">Header Text</h2> <p class="section-subtitle"> Some Text </p> </div> </div> <div class="row d-flex fHeight"> <div class="col-md-4"> <img class="btmImg" src="https://i.stack.imgur.com/V5BcV.png" alt="Sample Image" /> </div> <div class="col-md-8"> <img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="Sample Image" /> </div> </div> </div></section>

Flex-direction column makes flex items overlap IE11

It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem:

.flex {
flex: 1 1 auto;
}


Related Topics



Leave a reply



Submit