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, addingdisplay: flex
to its parent (section
) solves thatIE also have some issues when it comes to auto margins, so instead of
margin-top: auto
on the.col-md-4
item, usealign-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
Center Wrapped Items in a Space-Between Flexbox
Hiding Text Using "Text-Indent"
Pixel Border and Percentage Width in Proportion
Text Wrapping Incorrectly for Radio Button
Sass with Bem, Inherit Selector
How to Make Bootstrap Icon Display Inline with Text in a Tag
Use Flexbox and Maintain an Aspect Ratio Even Though Content Is Sized Differently
How to Remove Disqus Footer from Webpage
Styling Links Inside a Div with a Specific Class
Bootstrap: How to Create a Series of Div on One Line Hiding The Overflowing Divs
How to Apply Linear Gradient for Ie8
Styling Kml with CSS in Google Maps V3
CSS3 Multi Column Layout Ie Workaround
Is There a Way for a Particular Div to Ignore It's Parent Div's Positioning