This question already has answers here:
flex container min-height ignored in IE
(3 answers)
Closed 5 years ago.
I am trying to vertical align some text inside a flexbox container that has a min height and it works well except for in ie11, where the content is not centred.
.banner {
background:#ccc;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
flex-direction:column;
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
<span>IE is bobbins</span>
</div>
I have had a look around and people who have had similar problems are suggesting that adding a height will fix the issue but obviously this negates the min-height so it's not very useful.
Does anyone know a way to get the vertical centring to work in ie with a min-height?
If you are open to detecting and applying different CSS to ie11, you could do something like the following:
fiddle
.banner {
background: #ccc;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
flex-direction: column;
}
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.banner span {
display: table-cell;
min-height: 60px;
vertical-align: middle;
}
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
<span>IE is bobbins</span>
</div>
This fix by Chris Wright might be usefull:
https://codepen.io/chriswrightdesign/pen/emQNGZ/
It's based on the idea to wrap flex-direction:column inside a flex-direction:row parent:
.l-flex-parent {
display:flex;
flex-direction:row;
}
Related
I would like get this behavior in Internet Explorer 11
In Chrome and Firefox the words wrap to left and right when has a flexbox center alignment. In IE11 the wrap text is only to the right. Check the pictures to see the diference in IE11.
¿ How can get the Chrome and Firefox behavior in IE11 ? Thanks !!
div {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
See IE11 Preview
See Chrome and Firefox preview
This is a common flexbug in IE.
You could see that flex is partially supported in IE from:https://caniuse.com/#feat=flexbox
You could also find common flexbugs and related workarounds from: https://github.com/philipwalton/flexbugs
I modified part of your code and maybe you could refer to:
CSS.
.outer {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner {
box-sizing: border-box;
max-width: 100%;
}
HTML.
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="outer">
<div class="inner">
This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
</div>
</div>
To IE11 the solution is use flex-direction: column;
Code Sample
I was trying to use flex-direction column along with margin: auto for a child element in Safari 10, but the horizontal margins don't seem to apply while they do in literally every other browser (Edge, Firefox, Chrome). Here's a quick repro:
http://jsfiddle.net/paostj73/
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
}
It looks like this in Safari:
And like this in Chrome:
I know that setting align-items is a workaround, but unfortunately, it also happens to break other parts of my layout. Is there another way to fix this, and is this already a known issue?
This is an issue IE has, and if I'm not mistaken Safari too, caused by the align-items default value stretch, which stretch the element to full width and fail to apply the auto margin.
To keep the default, align-items: stretch for all items but the to-center element, add align-self: center to its rule
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
align-self: center; /* added, fix for IE and Safari */
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>
Based on how the other elements are suppose to render, setting align-items: flex-start to the center-pls, will also work, though then the other elements might need width: 100% set, so they stretch and fill their parent's width.
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
align-items: flex-start; /* added, fix for IE and Safari */
}
.to-center {
margin: auto;
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>
I have a complex layout where I center various elements vertically and horizontally with flexbox.
The last element then has margin-right:auto; applied to push the elements left (and negate centering them).
This works correctly everywhere except on IE10/11 and has been driving me crazy.
HTML/CSS sample:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
</div>
http://codepen.io/anon/pen/NrWVbR
You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.
Any IE/flexbox experts out there that have encountered something like this before?
This appears to be an IE bug.
According to the flexbox specification:
8.1. Aligning with auto margins
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
In other words, auto margins take precedence over justify-content.
In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).
Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.
IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.
(Note that IE10 is built on a previous version of the spec.)
Solutions
Method #1: Use auto margins only
If justify-content is removed, auto margins work fine in IE10/11.
So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).
Method #2: Use an invisible spacer div
Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.
#container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
#third-item {
flex-grow: 1;
visibility: hidden;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: pink;
}
#container > div {
background: cornflowerblue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
<div id='third-item'>third item</div>
</div>
I have a complex layout where I center various elements vertically and horizontally with flexbox.
The last element then has margin-right:auto; applied to push the elements left (and negate centering them).
This works correctly everywhere except on IE10/11 and has been driving me crazy.
HTML/CSS sample:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
</div>
http://codepen.io/anon/pen/NrWVbR
You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.
Any IE/flexbox experts out there that have encountered something like this before?
This appears to be an IE bug.
According to the flexbox specification:
8.1. Aligning with auto margins
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
In other words, auto margins take precedence over justify-content.
In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).
Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.
IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.
(Note that IE10 is built on a previous version of the spec.)
Solutions
Method #1: Use auto margins only
If justify-content is removed, auto margins work fine in IE10/11.
So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).
Method #2: Use an invisible spacer div
Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.
#container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
#third-item {
flex-grow: 1;
visibility: hidden;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: pink;
}
#container > div {
background: cornflowerblue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
<div id='third-item'>third item</div>
</div>
I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?
Flex Solution
It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.
Old Solution (Valid if you are not willing to use flex)
If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
(Or JSFiddle)
You now can do this with Flexbox justify-content: flex-end now:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consult your Caniuse to see if Flexbox is right for you.