Ошибка центровки и переполнения Flexbox в IE10?

Question

То, что я хочу сделать в принципе иметь заголовок и контейнер всегда по центру, если они маленькие, чем экран (корпус со 100% высоты). Если содержимое и заголовок больше экрана, то разрешите прокручивать его содержимое (обратите внимание, что заголовок не должен прокручиваться).

Мне удалось заставить его работать в Chrome, но не в IE10. Это JSFiddle.

var p = $('p'); 
 
$('button').click(function(){ 
 
\t for(var i=0; i<30; i++){ 
 
     $('.content').append(p.clone()); 
 
    } 
 
});

.screen{ 
 
    border: 1px solid red; 
 
    padding: 3px; 
 
    height: 300px; 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    justify-content: center; 
 
    -ms-flex-pack: center; 
 
    flex-direction: column; 
 
    -ms-flex-direction: column; 
 
} 
 

 
.header{border: 1px solid blue; padding: 10px;} 
 
.content{ border: 1px solid green; background: #aaa; overflow: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Add more content</button> 
 
<div class="screen"> 
 
    <div class="header"> 
 
     Header 
 
    </div> 
 
    <div class="content"> 
 
     <p>This is the content</p> 
 
    </div> 
 
</div>

http://jsfiddle.net/w8zg8hr2/2/

Answer 1

Вам нужно добавить flex: 0 1 auto; к .content DIV и overflow: auto; в .screen контейнера. IE10 использует синтаксис 2012, который по умолчанию flex: 0 0 auto вместо современного значения flex: 0 1 auto;

var p = $('p'); 
 
$('button').click(function() { 
 
    for (var i = 0; i < 30; i++) { 
 
     $('.content').append(p.clone()); 
 
    } 
 
});

.screen { 
 
    border: 1px solid red; 
 
    padding: 3px; 
 
    height: 300px; 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    justify-content: center; 
 
    -ms-flex-pack: center; 
 
    flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    overflow: auto; 
 
} 
 
.header { 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
} 
 
.content { 
 
    border: 1px solid green; 
 
    background: #aaa; 
 
    overflow: auto !important; 
 
    flex: 0 1 auto; /* Add this property value */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Add more content</button> 
 
<div class="screen"> 
 
    <div class="header">Header</div> 
 
    <div class="content"> 
 
     <p>This is the content</p> 
 
    </div> 
 
</div>

Browserstack скриншот Win7/IE10: