嵌套弹性框中的百分比高度 [英] percentage height in nested flex box

问题描述

我有一个很好的可调整界面使用flexbox，用户可以调整面板的高度和宽度。
但是，我想更改面板高度（目前使用像素）以使用百分比，因此，当他们更改一个面板时，其他面板会流动。

I've got a pretty good adjustable interface working with flexbox where a user can adjust the height and width of panels. However, I want to change the panel heights, which currently use pixels, to use percentage, so when they change one panel, the other panels flow.

一切都适用于宽度，但是当我使用height％它打破。

Everything works fine for widths, but when I use height % it breaks.

这里是一个小提琴，显示破碎的％。

Here's a fiddle showing the broken %.

http://jsfiddle.net/59trW/1 /

这个小提琴在红色元素上设置了50％的高度，但它根本不可见。

This fiddle has a 50% height set on the red element, but it isn't visible at all.

这里是css

.outer-flex {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    display: flex;
    -webkit-box-align: stretch;
    flex-direction: row;
}
.left-panel {
    width: 30px;
    background-color: #5eddd8;
}

.flex {
    display: flex;
    flex:1;
    -webkit-box-align: stretch;
    flex-direction: column;
    background-color: #64b92a;
    min-height: 1px;
}

.fixed {
    height: 20px;
    background-color: #ecf0f1;
}
.top-box {
    height: 30%;
    background-color: red;
}

.bottom-box {
    flex: 1;
}

和html

    <div class="outer-flex">
    <div class="left-panel">
      this is ok.
    </div>
   <div class="flex">
       <div class="fixed">doesn't move</div>
      <div class="top-box">top box</div>
      <div class="bottom-box">bottom box</div>
    </div>
</div>

我希望有一个小的改变，我可以让div可调整％。

I'm hoping there is a small change I can make to have the div be adjustable by %.

推荐答案

您需要在右栏中添加一个高度：

You need to add a height to your right column:

http://jsfiddle.net/59trW/2/

.flex {
    display: flex;
    flex:1;
    flex-direction: column;
    background-color: #64b92a;
    height: 100%; /* here */
}

此外， -webkit- box-align：stretch 对你没有任何作用，因为它来自旧的2009草稿（你甚至没有在这里使用），而不是当前的规范（同样，stretch是默认值属性）。

Also, -webkit-box-align: stretch is doing nothing for you because it comes from the old 2009 draft (which you aren't even using here), not the current spec (also, stretch is the default value for that property).

这篇关于嵌套弹性框中的百分比高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！