123

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't and then adds a scroll bar and fills content off screen, toward the bottom.

However, the page doesn't center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.

Below are the two scenarios. See the associated Fiddles. If the problem isn't evident right away, reduce the size of the result window so that it's forced to generate a scroll bar.

Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the Candidate Recommendation of Flexbox, so feature compatibility shouldn't be an issue (in theory).

Edit: When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned.

Edit: IE11 uses non-vendor specific implementation of Flexbox. Flexible box ("Flexbox") layout updates

Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11

Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Centers Correctly in Everywhere, Cuts Off Top When Sized Down

Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}
Dragonseer
  • 2,874
  • 7
  • 29
  • 42
  • I don't have access to IE11 at the moment, have you tried this solution: http://stackoverflow.com/questions/16122341/crucial-difference-between-flexbox-2009-and-2012-in-chrome ? – cimmanon Oct 15 '13 at 12:21
  • margin:auto doesn't appear to have made a difference. – Dragonseer Oct 15 '13 at 18:40
  • Please bug report Microsoft at least they will have one less bug in officially release, as always IE will have something(many unique bugs) to handle with.. – MarmiK Oct 17 '13 at 12:54
  • you need to use [`-ms-flexbox`](http://msdn.microsoft.com/en-us/library/ie/hh673531%28v=vs.85%29.aspx) for IE.. – avrahamcool Oct 17 '13 at 19:20
  • IE11 uses the current Flexbox standard of display:flex. http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx. I tried it anyway and it didn't make a difference; the content is still top aligned. Also, please note my edit in the original question which states that the outer div centers correctly when it is fullscreened but is top aligned when out of fullscreen. – Dragonseer Oct 17 '13 at 19:31
  • @Dragonseer did you have a chance to try my solution? – Todd Oct 24 '13 at 15:55
  • This is Flexbug #3 https://github.com/philipwalton/flexbugs#flexbug-3 – fabb Aug 28 '19 at 09:52

10 Answers10

236

I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style is missing at all. What I did was to add height style with some value and that fix the issue for me.

for example : 

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

So now we have height style, but the min-height will overwrite it. That way ie is happy and we still can use min-height.

Hope this is helpful for someone.

Florian Boudot
  • 995
  • 7
  • 9
Kaloyan Stamatov
  • 3,894
  • 1
  • 20
  • 30
  • 9
    Don't forget `-ms-flex-align:center;` for IE10. [Support for `align-items` was added only in IE11](http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx). – Boaz Aug 21 '14 at 21:46
  • 1
    Ah! so many months later this saved me - setting a height instead of min-height worked. – Pete Mar 04 '15 at 04:54
  • @KaloyanStamatov Check out [autoprefixer](https://css-tricks.com/autoprefixer/) and help rid yourself of these annoying cross browser issues. – hitautodestruct Dec 03 '15 at 12:33
  • 30
    This solution doesn't work when the content is larger than the min-height. The ``min-height`` does indeed override the ``height`` rule, but if the content exceeds the ``min-height`` it will simply extend outside the bounds. The [answer by @ericodes](http://stackoverflow.com/a/33222765/2093734) solves this problem and the solution works on all browsers that support flex. – lachie_h Feb 03 '16 at 15:45
  • 2
    For anyone coming here in or after 2019, the best solution by far is the one by @sergey-fedirko requiring no extra HTML elements and no hard heights ;) This one: https://stackoverflow.com/a/54796082/134120 – AsGoodAsItGets Mar 12 '19 at 12:19
  • I believe this is the cleanest solution on this thread. Solutions using the pseudo selector `:after` interfered with the output I get on the most up to date browsers. – Marcos Buarque Sep 30 '20 at 14:48
73

Try wrapping whatever div you have flexboxed with flex-direction: column in a container that is also flexboxed.

I just tested this in IE11 and it works. An odd fix, but until Microsoft makes their internal bug fix external...it'll have to do!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 examples for you to test in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

ericodes
  • 790
  • 5
  • 6
  • 1
    You should post the code you used to fix the issue in your actual answer, rather than link to an external URL. Then your answer will continue to be helpful, even after the link dies. – Kelly Keller-Heikkila Oct 19 '15 at 20:13
  • 11
    This is, by far, the best solution to this bug. All the other answers suggest a fixed height on the container, which does not work if the content is of variable height. This solution allows the use of ``min-height`` instead of a hard ``height`` rule, while still centering vertically on all browsers that support the use of ``display: flex``. – lachie_h Feb 03 '16 at 15:39
  • 1
    Just `display:flex` is needed on the wrapper, and maybe **either one** of these on the child: `width: 100%` `flex-basis:100%` `flex-grow:1` depending on your content/style. – fregante Jul 18 '16 at 12:57
  • this workaround does not work if the FlexContainerWrapper property `align-items` is set. You have to wrap the original flexbox with a flexbox without this property. – Marcus Krahl Jan 23 '17 at 13:38
  • hey @MarcusKrahl! are you saying wrap the original flexbox (FlexContainer) with a flexbox without a `align-items` property (FlexContainerWrapper)? – ericodes Feb 02 '17 at 21:05
  • yes, that is what I meant. If you set `align-items` on the `.FlexContainerWrapper`this workaround does not work. However you should be able to set `align-items` (or any other property for that matter) on `.FlexContainer` without any issues – Marcus Krahl Feb 04 '17 at 17:11
  • 1
    For anyone coming here in or after 2019, the best solution by far is the one by @sergey-fedirko requiring no extra HTML elements and no hard heights ;) This one: https://stackoverflow.com/a/54796082/134120 – AsGoodAsItGets Mar 12 '19 at 12:18
  • I spent a couple hours on @sergey-fedirko's solution but never got it working, whereas adding just `FlexContainerWrapper` (so no hard heights I didn't already have) worked first time for me. – Chris Apr 25 '19 at 16:12
  • CodePen now blocks IE entirely, saying you need a pro account to view pens in IE. It might be good to make these Stack Overflow pens instead. – Ariane Jun 16 '20 at 18:07
18

Here is my working solution (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
Sergey Fedirko
  • 659
  • 1
  • 7
  • 17
  • This was the only solution that worked for me, I am using Emotion for css in a React app. – Glen Carpenter Oct 22 '20 at 16:12
  • 1
    For everybody coming here, trying this and seeing that the element is too high, check if your flex item has padding or borders. If yes, set the min-height on the after-element by hand and subtract the padding and border from the min-height there. – Fabian S. Oct 27 '21 at 11:49
12

The original answer from https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}
Yaroslav Chapelskyi
  • 210
  • 2
  • 6
6

Just in case someone gets here with the same issue I had, which is not specifically addressed in previous comments.

I had margin: auto on the inner element which caused it to stick to the bottom of it's parent (or the outer element). What fixed it for me was changing the margin to margin: 0 auto;.

Gal Talmor
  • 1,004
  • 9
  • 14
5

This is a known bug that appears to have been fixed internally at Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

David Zulaica
  • 350
  • 3
  • 6
  • 46
    It apparently hasn't been fixed externally, though. – Blazemonger Sep 11 '15 at 16:50
  • 4
    "This issue appears to have been fixed in Microsoft Edge. We're not presently working on feature bugs in Internet Explorer outside of security-related issues." They've closed the issue for versions of IE pre-Edge – David Zulaica Nov 24 '15 at 22:41
  • 1
    Solution appears to be to use height instead of min-height, if you can. – frodo2975 Apr 11 '17 at 18:47
3

i have updated both fiddles. i hope it will make your work done.

centering

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

center and scroll

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }
Umar Khan
  • 454
  • 7
  • 30
  • Thanks for you input. Unfortunately, your Fiddles don't appear to work in Chrome or IE11. The centering example no longer centers in Chrome and the center and scroll example is not centered in IE11 and still cuts off content. – Dragonseer Oct 19 '13 at 21:18
1

I don't have much experience with Flexbox but it seems to me that the forced height on the html and body tags cause the text to disappear on top when resized-- I wasn't able to test in IE but I found the same effect in Chrome.

I forked your fiddle and removed the height and width declarations.

body
{
    margin: 0;
}

It also seemed like the flex settings must be applied to other flex elements. However, applying display: flex to the .inner caused issues so I explicitly set the .inner to display: block and set the .outer to flex for positioning.

I set the minimum .outer height to fill the viewport, the display: flex, and set the horizontal and vertical alignment:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

I set .inner to display: block explicitly. In Chrome, it looked like it inherited flex from .outer. I also set the width:

.inner
{
    display:block;
    width: 80%;
}

This fixed the issue in Chrome, hopefully it might do the same in IE11. Here's my version of the fiddle: http://jsfiddle.net/ToddT/5CxAy/21/

Todd
  • 1,674
  • 13
  • 13
  • Thanks for your reply. The height and width declaration are necessary to vertically center in IE. Without it, the content is no longer centered in IE11. – Dragonseer Oct 24 '13 at 22:07
  • Even with height set on the outer div? Maybe add a min-height to the body? – Todd Oct 25 '13 at 00:49
1

If you can define the parent's width and height, there's a simpler way to centralize the image without having to create a container for it.

For some reason, if you define the min-width, IE will recognize max-width as well.

This solution works for IE10+, Firefox and Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

Humberto Mendes
  • 11
  • 4
1

Found a good solution what worked for me, check this link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 First, we add a parent div, second we change min-height:100% to min-height:100vh. It works like a charm.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}
Avirtum
  • 438
  • 6
  • 14