Flexbox não centralizado verticalmente no IE

Eu tenho uma página da web simples com algum conteúdo Lipsum centralizado na página. A página funciona bem no Chrome e Firefox. Se eu reduzir o tamanho da janela, o conteúdo preenche a janela até que não possa mais e, em seguida, adiciona uma barra de rolagem e preenche o conteúdo fora da tela, na parte inferior.

No entanto, a página não é centralizada no IE11. Posso centralizar a página no IE flexionando o corpo, mas, se o fizer, o conteúdo começará a sair da tela em direção à parte superior e cortar a parte superior do conteúdo.

Abaixo estão os dois cenários. Veja os Fiddles associados. Se o problema não for evidente de imediato, reduza o tamanho da janela de resultados para que seja forçada a gerar uma barra de rolagem.

Nota: Este aplicativo destina-se apenas às versões mais recentes do Firefox, Chrome e IE (IE11), todos com suporte para a Recomendação Candidata do Flexbox , portanto, a compatibilidade de recursos não deve ser um problema (em teoria).

Editar : ao usar a API Fullscreen para exibir em tela cheia o div externo, todos os navegadores centralizam corretamente o CSS original. No entanto, ao sair do modo de tela inteira, o IE volta a ser centralizado horizontalmente e alinhado verticalmente no topo.

Editar : o IE11 usa implementação não específica do fornecedor do Flexbox. Atualizações de layout de caixa flexível ("Flexbox")

Centraliza e redimensiona corretamente no Chrome / FF, não centraliza, mas redimensiona corretamente no 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%;
}

Centra corretamente em todos os lugares, corta o topo quando dimensionado para baixo

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%;
}

Eu descobri que o navegador tem problemas para alinhar verticalmente os contêineres internos, quando apenas o estilo de altura mínima está definido ou quando o estilo de altura está ausente. O que fiz foi adicionar estilo de altura com algum valor e isso resolver o problema para mim.

por exemplo :

.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;
    }

Portanto, agora temos o estilo de altura, mas a altura mínima irá substituí-lo. Dessa forma, ou seja, está feliz e ainda podemos usar min-height.

Espero que isso seja útil para alguém.

Tente embrulhar qualquer div com o qual você tenha flexboxed flex-direction: columnem um contêiner que também seja flexboxed.

Acabei de testar isso no IE11 e funciona. Uma correção estranha, mas até que a Microsoft faça sua correção de bug interna externa ... terá que servir!

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 exemplos para você testar no IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Aqui está minha solução de trabalho (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Para o caso de alguém chegar aqui com o mesmo problema que eu tive, que não foi abordado especificamente nos comentários anteriores.

Eu tinha margin: autoo elemento interno que fez com que ele grudasse na parte inferior de seu pai (ou do elemento externo). O que consertou para mim foi mudar a margem para margin: 0 auto;.

Este é um bug conhecido que parece ter sido corrigido internamente na Microsoft.

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

A resposta original de 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;
}

Eu atualizei os dois violinos. Eu espero que isso faça seu trabalho.

centrando

    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;
}

centralizar e rolar

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;
    }

Não tenho muita experiência com, Flexboxmas me parece que a altura forçada nas tags htmle bodyfaz com que o texto desapareça no topo quando redimensionado - não consegui testar no IE, mas encontrei o mesmo efeito no Chrome.

Eu bifurquei seu violino e removi as declarações heighte width.

body
{
    margin: 0;
}

Também parecia que as flexconfigurações deveriam ser aplicadas a outros flexelementos. No entanto, aplicando- display: flexse aos .innerproblemas causados, eu defini explicitamente o .innercomo display: blocke o .outercomo flexpara o posicionamento.

Defino a .outeraltura mínima para preencher a janela de visualização display: flex, e defino o alinhamento horizontal e vertical:

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

Eu configurei .innerpara display: blockexplicitamente. No Chrome, parecia que era herdado flexde .outer. Eu também defino a largura:

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

Isso corrigiu o problema no Chrome, esperançosamente, ele pode fazer o mesmo no IE11. Esta é minha versão do violino: http://jsfiddle.net/ToddT/5CxAy/21/

Encontrou uma boa solução que funcionou para mim, verifique este link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Primeiro, adicionamos um div pai, depois mudamos min-height: 100% para min- altura: 100vh. Ele funciona como um encanto.

// 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;
}  

Se você pode definir a largura e altura do pai, há uma maneira mais simples de centralizar a imagem sem ter que criar um contêiner para ela.

Por algum motivo, se você definir a largura mínima, o IE também reconhecerá a largura máxima.

Esta solução funciona para IE10 +, Firefox e 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/