在IE10中的Flexbox集中和溢出錯誤？

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股利和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>

的Win7/IE10的

Browserstack截圖現代價值：