Flexbox не центрується вертикально в IE

У мене є проста веб-сторінка з деяким вмістом Lipsum, яка зосереджена на сторінці. Сторінка чудово працює в Chrome і Firefox. Якщо я зменшу розмір вікна, вміст заповнює вікно, поки воно не зможе, а потім додає смугу прокрутки і заповнює вміст поза екраном, донизу.

Однак сторінка не центрується в IE11. Я можу отримати сторінку в центрі IE, згинаючи тіло, але якщо я це зробити, то вміст починає виходити з екрана вгору і відрізає верхню частину вмісту.

Нижче наведено два сценарії. Дивіться пов'язані загадки. Якщо проблема не помітна відразу, зменшіть розмір вікна результатів, щоб змусити генерувати смугу прокрутки.

Примітка. Цей додаток націлений лише на останні версії Firefox, Chrome та IE (IE11), у яких усі підтримують рекомендацію щодо кандидата Flexbox , тому сумісність функцій не повинна бути проблемою (теоретично).

Редагувати : Використовуючи API повноекранного режиму для повноекранного зовнішнього поділу, усі браузери правильно центрують за допомогою оригінального CSS. Однак, виходячи з режиму повноекранного режиму, IE повертається до горизонтального центру та вертикалі.

Редагувати : IE11 використовує реалізацію Flexbox, що не залежить від постачальника. Оновлення макета вікна ("Flexbox")

Центрирует і розмір коректно в Chrome / FF, не центрирується, але змінюється правильно в 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%;
}

Центри правильно скрізь, відрізаються вгорі, коли розмір розміщений

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

Я виявив, що браузер має проблеми з вертикальним вирівнюванням внутрішніх контейнерів, коли встановлено лише стиль мінімальної висоти або коли стиль висоти взагалі відсутній. Що я зробив, це додати стиль висоти з деякою цінністю, що вирішує проблему для мене.

наприклад :

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

Отже, тепер у нас є стиль висоти, але мінімальна висота замінить його. Таким чином, тобто ми раді, і ми все ще можемо використовувати міні-висоту.

Сподіваюся, це комусь корисно.

Спробуйте загорнути будь-який div, з яким у вас є flexboxed, flex-direction: columnв контейнер, який також є flexboxed.

Я щойно тестував це в IE11 і він працює. Незвичайне виправлення, але поки Microsoft не зробить їх внутрішнє виправлення помилок зовнішнім ... це доведеться робити!

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 приклади для тестування в IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Ось моє робоче рішення (SCSS):

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

На всякий випадок, якщо хтось потрапить сюди з тим же питанням, що і я, яке в попередніх коментарях конкретно не розглядалося.

Я мав margin: autoна внутрішньому елементі, який спричинив його прилипання до нижньої частини його батьківського (або зовнішнього) елемента. Що для мене це виправлено, було зміна маржі на margin: 0 auto;.

Це відома помилка, яка, як видається, була виправлена ​​внутрішньо в Microsoft.

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

Оригінальна відповідь від https://github.com/philipwalton/flexbugs/isissue/231#issuecomment-362790042

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

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

я оновив обидві загадки. Я сподіваюся, що це зробить вашу роботу.

центрування

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

по центру та прокрутіть

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

Я не маю великого досвіду роботи, Flexboxале мені здається, що примусові висоти на тегах htmlі bodyтегах змушують текст зникати зверху при зміні розміру - я не зміг протестувати в IE, але такий же ефект я знайшов у Chrome.

Я розпрощав вашу скрипку і видаляв heightі widthзаяви.

body
{
    margin: 0;
}

Також здавалося, що flexпараметри потрібно застосувати до інших flexелементів. Однак, застосовуючи display: flexдо .innerвикликаним питань , тому я явно встановити , .innerщоб display: blockі встановити .outerдля flexпозиціонування.

Я встановлюю мінімальну .outerвисоту для заповнення вікна перегляду display: flex, а також встановлюю горизонтальне та вертикальне вирівнювання:

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

Я поставив .innerв display: blockявному вигляді. У Chrome це було схоже на спадщину flexвід .outer. Я також встановлюю ширину:

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

Це вирішило проблему в Chrome, сподіваємось, що це може зробити те ж саме в IE11. Ось моя версія скрипки: http://jsfiddle.net/ToddT/5CxAy/21/

Знайшли хороше рішення, що працювало для мене, перевірте це посилання https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 По-перше, ми додаємо батьківський дів, вдруге ми змінюємо min-висоту: 100% на min- висота: 100vh. Це працює як шарм.

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

Якщо ви можете визначити ширину та висоту батьків, існує більш простий спосіб централізації зображення, не створюючи для цього контейнера.

Чомусь, якщо визначити мінімальну ширину, IE також розпізнає максимальну ширину.

Це рішення працює для IE10 +, Firefox та 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/