css - 当 out 容器的高度被其他元素拉伸(stretch)时，height=100% 不起作用？

Question

这是我的代码:

http://jsfiddle.net/ok7rj8my/

HTML:

<div class="container">
    <div class="boxLeftWrapper">
        <input/>
        <input/>
    </div>
    <div class="boxRightWrapper">

    </div>
</div>

CSS:

div , input {
    border: 1px solid #000000;
}

.container {
    display: -webkit-box;
    -webkit-box-orient : horizontal;
    -webkit-box-align : center;
    -webkit-box-pack : center;
}

input {
    display: block;
    height: 70px;
    -webkit-box-flex : 1;
    width: 100%;
}

.boxLeftWrapper {
    display: -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-box-align : center;
    -webkit-box-pack : center;
    -webkit-box-flex : 1;
}

.boxRightWrapper {
    width: 300px;
    height: 100%;
}

高度:100% 不适用于 .boxRightWrapper。为什么？有什么办法可以让boxRightWrapper适合.container的高度吗？

Answer 1

如果容器没有固定高度，那么它的子元素将无法使用百分比形式的高度，因为容器的高度尚未确定。

有一个 css only work around 我已经看到使用它来有效地将 div 吸入它下面留下的空间

.boxRightWrapper {
    width: 300px;
    height: 100%;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

然后这样您就看不到它创建的所有空间 overflow hidden 。 Oh 还删除了 box-align center，因为它会将框推到底部。

.container {
    overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient : horizontal;
    /* -webkit-box-align : center; */
    -webkit-box-pack : center;
}

这是一把 fiddle http://jsfiddle.net/leighking2/vqgt07ds/