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

Question

我正在尝试将flexbox嵌套在另一个flexbox中.外盒是垂直的:

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

顶部区域适合内容flex 0 1 auto,下半部分填充剩余空间flex 1 1 auto.

在下半部分我有另一个柔性盒水平.我希望2个内盒之间的空间位于对齐和弯曲端之间,因此基本上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

基本上，您看到的是“height: 100%;” #bottomcontents 上正在强制容器位于其周围容器的“外部”。100% 高度最终从其父级获取高度，父级也具有 100% 高度；这意味着为#bottomcontents 指定的高度被设置为与#outer 相同的高度。如果添加“overflow:hidden;”，您可以更清楚地看到它超出了应有的范围。到#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/