In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.
JS Bin
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
width: 100%;
}
.red {
background-color: red;
flex-grow: 1;
display: flex;
max-width: 200px;
}
<div class="container">
<div class="red">non centered box</div>
</div>
It is a bug. But according to IE Feedback it was supposed to be fixed already.
As a workaround, you can remove flex-grow: 1; if you don't have to use it.
Explicitly set width: calc(100%); so IE knows the box width and center it properly.
I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in #support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.
#supports(text-align:center) {
div {
max-width: 350px;
}
}
Related
I have a project with flex box and currently I am struggling with the view from Internet Explorer 11.
In Chrome, Edge, Firefox everything looks good - after the container the browser window is ending.
But in Internet Explorer 11 I get a white empty space at the bottom.
I have checked lots of different solutions, but nothing is working.
Do you have a hint for me.
Thanks a lot.
I have implemented a flex-container:
.flex-container {
flex-direction: row;
display: flex;
justify-content: center;
width: 100%;
}
And in the flex-container I have two flex elements with these settings:
.flex-container-one {
width: 70%;
text-align: left;
}
.flex-container-two {
width: 30%;
text-align: left;
}
It is likely that there is some padding-bottom value that explorer is using by default for the .flex-container. Also since you didn't specify the height it is being set by the height of the content within and their default values. Specifying the height can solve your issue.
Since the newer Chrome version (75.0.3770.80), few images on my website are stretched.
These images are in a div, with theses properties :
<div class="column">
<img
:src="insuranceLogo"
class="insurance"
>
<span>
{{ offer.offer_name }}
</span>
</div>
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.insurance {
width: 100%;
max-width: 150px;
}
Until today, it was working great, but with the new Chrome version, my images are all stretched !
I tried on an older Chrome version, it was ok, so I updated it to the new one : same results, stretched.
My solution is to wrap my img tag inside a div. But I'm curious to know why this behavior changed.
Thanks ! :)
I know this doesn't answer your main question: "why this behavior changed?".
Just posting another possible solution. Setting flex-basis: 0; for the image element worked for me.
.insurance {
width: 100%;
max-width: 150px;
flex-basis: 0;
}
Because the flex-basis computation changed:
https://chromium.googlesource.com/chromium/src/+/3ed97a76cfe8dd422770bcc3b62851333a18ed32
to fix this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=958802
I have two divs:
top div contains a long text that takes up several lines
lower div has min-height and flex-grow: 1
When I reducing the window to the scroll appeared, then in chrome everything is displayed correctly. But in IE11 top div is reduced to one line, and its text is on top of the bottom div.
I can fix it only with set some width for content of top div (it work with fixed width, or calc width, but not work with percentage width)
How can I fix it without setting width or with percentage width (width:100%)?
body,
html {
height: 99%;
padding: 0;
margin: 0;
}
.flexcontainer {
width: 25%;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid lime;
}
.allspace {
flex-grow: 1;
min-height: 300px;
background-color: yellow;
}
.longtext {
background-color: red;
}
.textcontainer {
border: 1px solid magenta;
/*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}
<div class="flexcontainer">
<div class="longtext">
section 1 with long name section 1 with long name section 1 with long name
</div>
<div class="allspace">
all space
</div>
</div>
jsfiddle: https://jsfiddle.net/tkuu28gs/14/
Chrome:
IE11:
IE11 is full of flex bugs and inconsistencies with other browsers.
In this case, the source of the problem is flex-shrink.
IE11 is rendering flex items oddly after applying flex-shrink: 1 (a default setting), which causes the lower item to overlap its sibling above. This problem doesn't occur in other major browsers.
The solution is to disable flex-shrink. It fixes the problem in IE11 without changing anything in other browsers.
Add this to your code:
.longtext {
flex-shrink: 0;
}
revised fiddle
You may also want to look into:
setting min-width: auto on flex items, as IE11 has a different minimum size default than newer browsers. See the "Browser Rendering Notes" section in my answer here: Why don't flex items shrink past content size?
setting the container to width: 100%, as IE11 may not do this automatically to block-level flex containers. Text in a flex container doesn't wrap in IE11
The use of flex-shrink: 0; mentioned in the accepted answer works to prevent overlapping. However, I'm using like flex: 0 1 15% as I intend to allow shrinking and this renders nicely in other browsers like MS Edge, Chrome, and Firefox, but not in IE 11.
To apply no shrinking (flex-shrink: 0) only for IE 11, I used the following instead as the -ms- is vendor-specific:
-ms-flex-negative: 0 !important;
problem solved:
body, html {
height: 100vh;
padding:0;
margin:0;
}
.flexcontainer{
width:25%;
display: flex;
height: 100%;
flex-flow: column;
border: 1px solid lime;
}
.allspace{
flex-grow:1;
background-color: yellow;
}
.longtext{
background-color: red;
//EDIT
flex-grow: 0;
min-height: 100px;
}
.textcontainer{
border:1px solid magenta;
/*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}
EDIT (screenshots on IE11)
I am displaying a row of images. Here is my html:
<div class="flex">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
<img src="img4.jpg"/>
</div>
Here is my css:
.flex {
display: flex
}
img {
height: auto;
}
I want my images to display in a row. I have not given the imgs any width, so on Chrome the imgs take up their natural width and push out bigger than then screen. This is how I want it to work. With Safari, they flexbox will only take up the full viewport width. I have tried setting an image width, flex-basis, but cannot make Safari use more than just the visible screen. Is there a flexbox issue that I don't know about? What else can I do?
Looks like this is a bug in Safari. Try adding flex-shrink: 0 to img.
img {
height: auto;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
With webkit prefix to support older Safari browsers -- I'd add it to .flex too as james suggests (note to self: upgrade Safari).
I think safari needs the -webkit options for it to work. e.g.
.flex {
display: flex;
display: -webkit-flex;
}
img {
height: auto;
}
This is the same for all options. e.g.
justify-content: center;
-webkit-justify-content: center;
align-items: stretch;
-webkit-align-items: stretch;
This page is a nice reference source for flexbox:
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
I'm trying to put two flex items side by side, baseline-aligned (simple enough!), but with some small constraints: (1) overflow: hidden on both; (2) some padding-top on the second flex item. Here's the HTML:
<div class="outer">
<div class="inner one">Hello</div>
<div class="inner two">Hello</div>
</div>
...and the CSS:
.outer {
display: flex;
align-items: baseline;
}
.inner {
width: 30px;
overflow: hidden;
}
.one {
background: red;
}
.two {
background: yellow;
padding-top: 40px;
}
While Chrome (v43) gets the layout right (or at least what one could expect), Firefox (v38) breaks it completely: open this fiddle in Firefox and you'll see.
Any workaround for correct vertical alignment? It's so simple I can't believe both major browsers don't offer the same result.
The workaround for this is fairly simple.
.outer {
display: flex;
align-items: flex-end;
}
Note using flex-end for an align property, and not baseline. Baseline is a complicated thing in flexbox as far as i can see. If you want to achieve proper results with baseline you should maybe fancy up that example of yours with some more typography.
About the overflow problem and why it acts like that im not really sure about. Still i hope you can workaround your issue like that.
I advise you on reading this great, so called "Complete Guide to Flexbox".
Greetings!