如何设置弹性框项目的高度100％

Question

我想将flexbox项目的子元素的高度设置为100％。但它不起作用。

这是这些代码的jsFiddle link。

现在，我通过设置内部子元素的position : absolute和top : 0; right : 0; bottom : 0; left : 0;来破解此解决方案。你能告诉我为什么上面的方法不起作用吗？是否有任何解决方案没有使用position。

Answer 1

这是因为您对height: 100%使用了.wrapper__second__thumb__inner，.wrapper__thumb包含在height内，其自身没有0px height（.wrapper__second__thumb__inner），因此0px height也会height: 100%。

您需要的是将.wrapper__thumb添加到HTML，或将其从.wrapper__second__thumb__inner中完全删除，以便height直接从.wrapper__second获取{{1}} {{1}}

这是Updated Fiddle

Answer 2

使用vh单位表示高度，使用vw表示宽度

.wrapper {
    display : flex;
    align-items : center;
    flex-flow : row nowrap;
    justify-content : space-between;
    background-color : lightblue;
    width : 100vw;
    height: 100vh;
}

更新了小提琴：http://jsfiddle.net/qh8k6pft/3/

此处有更多信息：http://css-tricks.com/viewport-sized-typography/