Flexbox e Internet Explorer 11 (exibir: flex em <html>?)

117

Estou planejando deixar de usar layouts "flutuantes" e usar CSS flexbox para projetos futuros. Fiquei encantado em ver que todos os principais navegadores em suas versões atuais parecem oferecer suporte (de uma forma ou de outra) ao flexbox.

Eu fui para "Resolvido pelo Flexbox" para ver alguns exemplos. No entanto, o exemplo do "Rodapé Fixo" não parece funcionar no Internet Explorer 11. Eu brinquei um pouco e fiz com que funcionasse adicionando display:flexao <html>e width:100%ao<body>

Portanto, minha primeira pergunta é: Alguém pode me explicar essa lógica? Eu apenas brinquei e funcionou, mas não entendo muito bem por que funcionou assim ...

Depois, há o exemplo de "Objeto de mídia" que funciona em todos os navegadores, exceto - você adivinhou - o Internet Explorer. Eu também mexi nisso, mas sem sucesso.

Minha segunda pergunta, portanto, é: Existe uma possibilidade "limpa" de fazer o exemplo de "Objeto de mídia" funcionar no Internet Explorer?

— Kodekan
fonte

1

Apenas uma atualização para esta velha questão: a demonstração vinculada funciona bem no IE11. Deve ter sido um bug corrigido nos 3 anos desde que isso foi perguntado.

— Daryl

151

De acordo com http://caniuse.com/#feat=flexbox :

"Os valores padrão do IE10 e IE11 para flexsão, em 0 0 autovez de 0 1 auto, conforme as especificações do rascunho, em setembro de 2013"

Então, em palavras simples, se em algum lugar do seu CSS você tiver algo assim:, flex:1isso não é traduzido da mesma forma em todos os navegadores. Tente mudá-lo para 1 0 0e acredito que você verá imediatamente que -kinda- funciona.

O problema é que esta solução provavelmente bagunçará o firefox, mas então você pode usar alguns hacks para atingir apenas o Mozilla e alterá-lo de volta:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Como flexboxé um candidato do W3C e não oficial, os navegadores tendem a fornecer resultados diferentes, mas acho que isso vai mudar no futuro imediato.

Se alguém tiver uma resposta melhor gostaria de saber!

— Odisseas
fonte

1

Acho que isso significa que o IE10 precisa -ms-flex: 1 0 0;e o IE11 flex: 1 0 0;..?

— Eystein

19

Com o Google Chrome 39, de repente, isso parou de funcionar para mim. Levei séculos para rastrear, mas era a especificação do terceiro dígito. O Chrome 39 não adere flex: 1 0 0;. Mas flex: 1 0 0%;( observe o % ) ou flex: 1 0 auto;funcionará.

— Eystein

Sim, é verdade que quebrou alguns dos meus projetos também! Corrigi-o simplesmente mudando para flex: 1;Acho que depende do que você está

— procurando

1

O principal problema do IE11 é a maneira como ele calcula flex-basis. O Github tem uma boa discussão sobre por que flex:1 0 100%funciona em alguns casos para o IE11 enquanto flex: 1 0 0%ou mesmo flex: 1 0 autofunciona em outros. Você tem que saber o conteúdo com antecedência.

— P.Brian.Mackey

Em caniuse.com/#feat=flexbox , é mencionado especificamente em problemas conhecidos que o IE 11 requer que uma unidade seja adicionada ao terceiro argumento, a propriedade flex-basis.

— Henry Neo

49

Use outro flex container para corrigir o min-heightproblema no IE10 e IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Veja uma demonstração de trabalho .

Não use o layout flexbox diretamente bodyporque ele confunde os elementos inseridos por meio de plug-ins jQuery (autocomplete, pop-up, etc.).
Não use height:100%ou height:100vhem seu contêiner porque o rodapé ficará colado na parte inferior da janela e não se adaptará a conteúdo longo.
Use, em flex-grow:1vez de flex:1causar, os valores padrão do IE10 e IE11 para flexare 0 0 autoe not 0 1 auto.

— BeliG
fonte

3

Eu descobri que eu tinha para adicionar flex-direction: columnpara .ie-fixMinHeightevitar efeitos colaterais. Se você não tiver um HTML específico do IE, pode usar.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

Eu sei que tem 2 anos, mas obrigada! Eu estava seguindo stackoverflow.com/a/24979148/359157 e lutei sem parar tentando descobrir por que o IE foi quebrado enquanto o Edge e o Chrome funcionavam perfeitamente. O heightvs min-heightfoi a chave.

— TyCobb

39

Você só precisa flex:1; Isso corrigirá o problema do IE11. Eu apoio Odisseas. Além disso, atribua 100% de altura para html, elementos do corpo .

Mudanças CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

url de trabalho: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
fonte

Você poderia explicar mais sobre esse problema: Existe uma possibilidade "limpa" de fazer o exemplo "Objeto de mídia" funcionar no IE?

— Ashok Kumar Gupta

1

Isso funciona para mim. Uma coisa que eu encontrei (porque ele me pegou fora) é que se você tiver um elemento que contém, os display: flex;e estilos associados deve ser aplicada a ambos os bodye container: jsfiddle.net/Skateside/nezdrrkr

— James Longo

Definir a altura do html para 100% parece fazer com que o conteúdo de mainpare de crescer adequadamente (no cromo, pelo menos); se você adicionar conteúdo suficiente, o rodapé será ultrapassado. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth do jeito que está agora, você basicamente está dizendo para crescer para 100% e nem um pixel a mais. Em vez disso, deve definir htmlcomo min-height: 100%para acompanhar o seu conteúdo

— Odisseas

Obrigado! A parte que estava faltando para mim não era realmente nenhum dos atributos flex, mas a altura: 100% no elemento contido (que para mim era uma div .pusher porque meu site inclui uma barra lateral responsiva).

— zanther

0

Aqui está um exemplo de uso do flex que também funciona no Internet Explorer 11 e no Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Expandir trecho

— BadTree Lu
fonte

15

Forneça informações adicionais - em vez de apenas colar seu Html.

— Peter

7

Embora essa resposta provavelmente seja correta e útil, é preferível incluir alguma explicação com ela para explicar como ela ajuda a resolver o problema. Isso se torna especialmente útil no futuro, se houver uma mudança (possivelmente não relacionada) que faça com que ele pare de funcionar e os usuários precisem entender como funcionava antes.

— Erty Seidohl

0

Às vezes, é tão simples quanto adicionar: '-ms-' na frente do estilo Like -ms-flex-flow: row wrap; para fazê-lo funcionar também.

— Marsel Gray
fonte

3

Às vezes, mas na maioria das vezes não;) Vamos

— descartar o