Flexbox nie wyśrodkowuje się w pionie w IE

Mam prostą stronę internetową z zawartością Lipsum, która jest wyśrodkowana na stronie. Strona działa dobrze w Chrome i Firefox. Jeśli zmniejszę rozmiar okna, zawartość wypełnia okno, aż nie może, a następnie dodaje pasek przewijania i wypełnia zawartość poza ekranem, w dół.

Jednak strona nie jest wyśrodkowana w IE11. Mogę wyśrodkować stronę w IE, wyginając ciało, ale jeśli to zrobię, zawartość zacznie znikać z ekranu w górę i obcina górę zawartości.

Poniżej znajdują się dwa scenariusze. Zobacz powiązane Skrzypce. Jeśli problem nie jest od razu widoczny, zmniejsz rozmiar okna wyników, tak aby było zmuszone do wygenerowania paska przewijania.

Uwaga: ta aplikacja jest przeznaczona tylko dla najnowszych wersji przeglądarek Firefox, Chrome i IE (IE11), które obsługują rekomendację kandydata Flexbox , więc kompatybilność funkcji nie powinna stanowić problemu (teoretycznie).

Edycja : podczas używania pełnoekranowego interfejsu API do pełnoekranowego zewnętrznego elementu div, wszystkie przeglądarki prawidłowo wyśrodkowują, używając oryginalnego CSS. Jednak po wyjściu z trybu pełnoekranowego IE powraca do wyśrodkowania w poziomie i wyrównania do góry w pionie.

Edycja : IE11 używa implementacji Flexbox innej niż producent. Aktualizacje układu elastycznego pudełka („Flexbox”)

Centruje i zmienia rozmiar poprawnie w Chrome / FF, nie wyśrodkowuje, ale poprawnie zmienia rozmiar w IE11

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

Wyśrodkowuje się wszędzie, odcina od góry, gdy jest mniejszy

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

Zauważyłem, że np. Przeglądarka ma problem z wyrównywaniem kontenerów wewnętrznych w pionie, gdy jest ustawiony tylko styl minimalnej wysokości lub gdy w ogóle brakuje stylu wysokości. To, co zrobiłem, to dodanie stylu wysokości z pewną wartością i to rozwiązało problem.

na przykład :

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

Mamy teraz styl wysokości, ale min-wysokość nadpisze go. W ten sposób tzn. Jest szczęśliwy i nadal możemy używać min-height.

Mam nadzieję, że to jest pomocne dla kogoś.

Spróbuj owinąć dowolny element div, z którym masz flexbox, flex-direction: columndo kontenera, który również jest flexbox.

Właśnie przetestowałem to w IE11 i działa. Dziwna poprawka, ale dopóki Microsoft nie sprawi, że ich wewnętrzna poprawka będzie zewnętrzna ... to będzie musiało wystarczyć!

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 przykłady do przetestowania w IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Oto moje rozwiązanie robocze (SCSS):

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

Na wypadek, gdyby ktoś dotarł tutaj z tym samym problemem, co ja, który nie został szczegółowo omówiony w poprzednich komentarzach.

Miałem margin: autona elemencie wewnętrznym, który spowodował, że przykleił się do spodu swojego rodzica (lub elementu zewnętrznego). Naprawiło to dla mnie zmianę marginesu na margin: 0 auto;.

Jest to znany błąd, który prawdopodobnie został naprawiony wewnętrznie w firmie Microsoft.

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

Oryginalna odpowiedź z 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;
}

zaktualizowałem oba skrzypce. mam nadzieję, że dzięki temu wykonasz swoją pracę.

krążyna

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

wyśrodkuj i przewiń

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

Nie mam dużego doświadczenia, Flexboxale wydaje mi się, że wymuszona wysokość tagów htmli bodypowoduje, że tekst znika na górze po zmianie rozmiaru - nie mogłem przetestować w IE, ale znalazłem ten sam efekt w Chrome.

Rozwidliłem twoje skrzypce i usunąłem deklaracje heighti width.

body
{
    margin: 0;
}

Wydawało się również, że flex ustawienia należy zastosować do innych flexelementów. Jednak stosowanie display: flexsię do .innerspowodowanych kwestiami tak jawnie ustawić .innersię display: blocki ustawić .outersię flexdo pozycjonowania.

Ustawiam minimalną .outerwysokość wypełniania rzutni display: flex, oraz ustawiam wyrównanie w poziomie i pionie:

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

I ustawione .innerna display: blockwprost. W Chrome wyglądało na to, że odziedziczył flexpo .outer. Ustawiłem też szerokość:

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

To rozwiązało problem w Chrome, mam nadzieję, że może zrobić to samo w IE11. Oto moja wersja skrzypiec: http://jsfiddle.net/ToddT/5CxAy/21/

Znalazłem dobre rozwiązanie, które działało u mnie, sprawdź ten link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Najpierw dodajemy nadrzędny div, po drugie zmieniamy min-height: 100% na min- wysokość: 100 vh. To działa jak urok.

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

Jeśli możesz zdefiniować szerokość i wysokość rodzica, istnieje prostszy sposób na scentralizowanie obrazu bez konieczności tworzenia dla niego kontenera.

Z jakiegoś powodu, jeśli zdefiniujesz min-width, IE rozpozna również max-width.

To rozwiązanie działa dla IE10 +, Firefox i 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/