IE10中的Flexbox中心和溢出错误？ [英] Flexbox centering and overflow bug in IE10?

问题描述

>

想做基本上是有一个标题和一个容器总是居中，如果他们小于屏幕（身体与100％的高度）。如果内容和标题比屏幕大，则允许在其容器内滚动（注意标题不应该可滚动）。

What I want to do basically is have a header and a container always centered if they're small than the screen (body with 100% height). In case the content and header are bigger than the screen, then allow to scroll inside its container (notice that the header shouldn't be scrollable).

我设法使它工作在Chrome，但不是在IE10。这是JSFiddle。

I managed to make it work in Chrome but not in IE10. This is the JSFiddle.

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

.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/

推荐答案

您需要向 flex：0 1 auto; .content div和 overflow：auto; $ c> container。 IE10使用2012年默认为 flex：0 0 auto 的语法，而不是现在的 flex：0 1 auto;

You need to add flex: 0 1 auto; to the .content div and overflow: auto; to the .screen container. IE10 uses the 2012 syntax which defaults to flex: 0 0 auto instead of the modern value of 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 screenshot of Win7/IE10:

这篇关于IE10中的Flexbox中心和溢出错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！