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.
Related
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
This question already has answers here:
Flex elements ignore percent padding in Firefox
(4 answers)
Closed 7 years ago.
So, my goal is to have three square boxes whose sides expand/contract based on the size of the browser. Each box only contains one line of text, so the idea is to have a large amount of padding to fill in the extra space.
The site is built using flexbox, and I thought I had an elegant solution by using a :before to inherit the width of the parent element and use the length of it as a padding-top:
.square:before {
content:'';
padding-top:100%;
}
This works perfectly in most browsers, but I was dismayed to see Firefox is having issues. Here's the rest of the code and a JSFiddle. Any suggestions?
http://jsfiddle.net/uLqqop0q/5/
Thee CSS~~
#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;
text-align: center;
vertical-align: middle;
}
.square:before {
content:'';
padding-top:100%;
}
EDIT: Easiest fix—just add “display:table” to the pseudo element.
That's because you use a percentage.
With block layout, percentages in paddings are resolved according to the width of the containing block, even if the paddings are in the vertical direction.
However, flexbox wanted to change this behavior, and resolve the paddings according to the width or height of the containing block, depending on the direction of the padding.
However, browsers didn't agree. Then, Firefox resolves padding-top: 100% according to the height, and Chrome does it according to the width.
In the case of Firefox, since the height of the containing block depends on the height of the content, and the padding of the pseudo-element is part of the content, the percentage can't be resolved (it would be a circular reference). Then it becomes 0. This is analogous to the case of height: 100% in a block layout where the parent has height: auto.
You can fix it by using an explicit length instead of a percentage.
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;
}
}