如何让flexbox align-items flex-end在WebKit/Blink中工作？

Question

我试图在另一个flexbox中嵌套一个flexbox。外箱是垂直的:

+------+
|      |
+------+
|      |
|      |
|      |
+------+

顶部区域适合内容的位置 flex 0 1 auto 而下半部分填补了剩余的空间 flex 1 1 auto.

在下半部分，我有另一个水平的flex-box。我希望2个内框在across和flex-end之间为align-items，所以基本上2个内侧被固定在左右底角上，如下所示:

+------+
|      |
+-+  +-|
|L|  |R|
+------+

设置这个似乎在Firefox中工作，但在Chrome（Blink）和Safari中我得到了这个:

+------+
|      |
|      |
|      |
+-+--+-|
|L|  |R|
+-+  +-+

这是HTML

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

还有CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;   
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    height: 100%;
    border: 1px solid red;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-content: center;
    -webkit-align-items: center;
    min-height: auto;    
}
#top {
    width: 100%;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    border: 1px solid blue;
}
#bottom {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    border: 1px solid green;
}
#bottomcontents {
    height: 100%;
    width: 100%;
    border: 1px solid pink;
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    justify-content: space-between;
    align-content: center;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    -webkit-align-content: center;
    -webkit-align-items: flex-end;
    min-height: auto;        
}

#botleft, #botright {
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
#botleft {
    border: 1px solid purple;
}
#botright {
    border: 1px solid cyan;
}

和 这是一把小提琴

它在Firefox中按预期工作。我做错什么了吗？这是Chrome和Safari中的错误吗？有解决方法吗？

Answer 1

基本上，你看到的是"高度":100％;"on#bottomcontents正在迫使容器在其周围容器的"外部"。100%的高度最终从父级得到它的高度，父级也有100%的高度;这意味着为#bottomcontents指定的高度被设置为与#outer相同的高度。你可以更清楚地看到，如果你添加"溢出"，它已经超出了它应该的范围:隐藏;"到#bottom。您的问题的更深入的讨论可以在这里找到:你遇到的是这里: Flexbox列子项上的高度100%

除非我错过了你需要的一些要求，否则你也可以删除#bottomcontents容器并使用#bottom。示例代码（底部的jsfiddle示例）:

HTML格式:

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

CSS:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;   
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    border: 5px solid red;
    display: flex;
    display: -webkit-flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#top {
    width: 100%;
    border: 5px solid blue;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#bottom {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 100%;
    border: 5px solid green;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

#left {
    border: 5px solid purple;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#right {
    border: 5px solid cyan;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

我的小提琴: http://jsfiddle.net/blake770/2br5x/