Flexbox：我的 div 没有全高

Question

我刚刚使用 Flexbox 创建了一个设计非常简单的网站。使用 Firefox 和 Chrome，一切正常，但使用 IE，我有一个小问题，但很明显。这是页面：http://www.csharpnet.net/article/introduction。如果你用 Firefox 检查它，你会看到左边有一个 100% 的高度，但用 IE，情况并非如此。我一遍又一遍地检查我的 CSS，但我不知道要更改什么。

我检查了所有父元素，它们都有 100% 的高度，那么为什么这边也没有这个高度？

感谢您的帮助。

编辑：代码示例和fiddle with the code

<html style="height:100%;margin:0;">


<body style="height:100%;margin:0;">
    <div style="display:flex;flex-flow:column;height:100%;">



        <div style="background-color:green;flex-grow:1;flew-shrink:1;flex-basis:200px;display:flex;flex-flow:row;">
            <div style="background-color:yellow;flex-basis:700px;flex-grow:1;flew-shrink:1;"></div>
            <div style="background-color:white;flex-basis:100%;flex-grow:1;flew-shrink:1;"></div>
        </div>
        <div style="background-color:red;flex-grow:1;flew-shrink:1;flex-basis:100%;display:flex;flex-flow:row;">
            <div style="background-color:blue;flex-basis:500px;flex-grow:1;flew-shrink:1;"></div>
            <div style="background-color:gray;flex-basis:100%;flex-grow:1;flew-shrink:1;">
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
            </div>              
        </div>
    </div>

</body>

Answer 1

我最近运行遇到了同样的行为，并在此线程中找到了解决方案：How to make flexbox children 100% height of their parent?

这是 "Brett Postin" 使用 "position:absolute; bottom:0" 技巧创建全高容器的答案，因为 "height:100%" 由于 flex box child 不使用显式高度而无法工作确定它的高度。

Answer 2

我已经采用了您的代码并将样式拆分为单独的样式表，以便于进行故障排除。我还清理了它，修复了拼写错误 (flex-flew) 并删除了不必要的代码。

除此之外，我使用了正确的术语并删除了不需要的 flexbox 功能（例如 flex: 1 1 200px; 基本上与在弹性元素上说 flex: 1; width: 200px; 相同，但是这取决于个人）。

但真正起作用的是删除 height: 100% 并完全依赖 flexbox。

这是更新后的 fiddle：http://jsfiddle.net/uako2dsj/2/

记得加前缀，更好的适应IE。

HTML

<body>
<div class="container">

    <div class="header">
        <div class="yellow"></div>
        <div class="white"></div>
    </div>
    <div class="content">
        <div class="blue"></div>
        <div class="gray">
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
        </div>              
    </div>
</div>
</body>

CSS

html, body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
}

.header {
    display:flex;
    height: 200px;

    background-color:green;
}

.yellow {
    width: 700px;

    background-color: yellow;
}

.white {
    width: 200px;
    flex: 1;

    background-color: white;
}

.content {
    display: flex;

    background-color: red;
}
.blue {
    width: 500px;

    background-color: blue;
}
.gray {
    width: 200px;
    flex:1;

    background-color: gray;
}

Flexbox：我的 div 没有全高

Flexbox: my div has not a full height

css

flexbox