Flexbox non centrato verticalmente in IE

Ho una semplice pagina web con alcuni contenuti Lipsum centrati sulla pagina. La pagina funziona bene in Chrome e Firefox. Se riduco le dimensioni della finestra, il contenuto riempie la finestra fino a quando non è possibile, quindi aggiunge una barra di scorrimento e riempie il contenuto fuori dallo schermo, verso il basso.

Tuttavia, la pagina non è centrata in IE11. Posso centrare la pagina in IE flettendo il corpo, ma se lo faccio, il contenuto inizia a uscire dallo schermo verso l'alto e taglia la parte superiore del contenuto.

Di seguito sono riportati i due scenari. Vedi i violini associati. Se il problema non è subito evidente, riduci le dimensioni della finestra dei risultati in modo che sia costretta a generare una barra di scorrimento.

Nota: questa applicazione si rivolge solo alle ultime versioni di Firefox, Chrome e IE (IE11), che supportano tutte la raccomandazione del candidato di Flexbox , quindi la compatibilità delle funzionalità non dovrebbe essere un problema (in teoria).

Modifica : quando si utilizza l'API a schermo intero per visualizzare a schermo intero il div esterno, tutti i browser vengono centrati correttamente utilizzando il CSS originale. Tuttavia, uscendo dalla modalità a schermo intero, IE torna ad essere centrato orizzontalmente e allineato verticalmente in alto.

Modifica : IE11 utilizza un'implementazione non specifica del fornitore di Flexbox. Aggiornamenti del layout della scatola flessibile ("Flexbox")

Centra e ridimensiona correttamente in Chrome / FF, non centra ma ridimensiona correttamente 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%;
}

Centra correttamente ovunque, taglia fuori quando viene ridimensionato

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

Ho scoperto che i browser, ad esempio, hanno problemi ad allineare verticalmente i contenitori interni, quando è impostato solo lo stile altezza minima o quando lo stile altezza non è affatto mancante. Quello che ho fatto è stato aggiungere uno stile di altezza con un certo valore e questo ha risolto il problema per me.

per esempio :

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

Quindi ora abbiamo lo stile di altezza, ma l'altezza minima lo sovrascriverà. In questo modo cioè è felice e possiamo ancora usare l'altezza minima.

Spero che questo sia utile per qualcuno.

Prova a racchiudere qualsiasi div con cui hai flexbox flex-direction: columnin un contenitore che sia anche flexbox.

L'ho appena testato in IE11 e funziona. Una soluzione strana, ma fino a quando Microsoft non rende esterna la correzione dei bug interni ... dovrà fare!

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 esempi da testare in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Ecco la mia soluzione di lavoro (SCSS):

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

Nel caso in cui qualcuno arrivi qui con lo stesso problema che ho avuto, che non è stato affrontato specificamente nei commenti precedenti.

Avevo margin: autol'elemento interno che lo faceva aderire alla parte inferiore del suo genitore (o l'elemento esterno). Ciò che lo ha risolto per me è stato cambiare il margine in margin: 0 auto;.

Si tratta di un bug noto che sembra essere stato risolto internamente in Microsoft.

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

La risposta originale da 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;
}

ho aggiornato entrambi i violini. spero che faccia il tuo lavoro.

centraggio

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

centro e scorrere

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

Non ho molta esperienza con Flexboxma mi sembra che l'altezza forzata su htmlebody tag faccia sì che il testo scompaia in alto quando viene ridimensionato - Non sono stato in grado di testare in IE ma ho trovato lo stesso effetto in Chrome.

Ho biforcato il tuo violino e ho rimosso le dichiarazioni heighte width.

body
{
    margin: 0;
}

Sembrava anche che le fleximpostazioni dovessero essere applicate ad altri flexelementi. Tuttavia, l'applicazione display: flexper i .innerproblemi causati così ho impostato in modo esplicito il .innerper display: blocke impostare la .outeraflex per il posizionamento.

Ho impostato l' .outeraltezza minima per riempire il viewport, il display: flexe ho impostato l' allineamento orizzontale e verticale:

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

Ho impostato .innera display: blockmodo esplicito. In Chrome, sembrava ereditato flexda .outer. Ho anche impostato la larghezza:

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

Questo ha risolto il problema in Chrome, si spera che potrebbe fare lo stesso in IE11. Ecco la mia versione del violino: http://jsfiddle.net/ToddT/5CxAy/21/

Ho trovato una buona soluzione cosa ha funzionato per me, controlla questo link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Innanzitutto, aggiungiamo un div genitore, secondo cambiamo min-height: 100% in min- altezza: 100VH. Esso funziona magicamente.

// 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 puoi definire la larghezza e l'altezza del genitore, c'è un modo più semplice per centralizzare l'immagine senza dover creare un contenitore per essa.

Per qualche motivo, se definisci la larghezza minima, IE riconoscerà anche la larghezza massima.

Questa soluzione funziona per 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/