html - 当容器具有动态高度时设置 flex 元素的百分比高度

Question

我有一个简单的包装器，其中有 2 个 div 元素。

我希望第一个获得 85% 的高度，第二个获得仅 15% 的高度。

当我为包装器设置固定高度时它会起作用。尽管遗憾的是我的 wrapper 具有动态高度。

你知道我怎样才能做到这一点吗？

我还提供了一个插件:http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview

代码:

.outer{
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  /* if i set the fixed height everthing works
     though i do want a dynamic height
  height: 800px; */
}
.main {
  background-color: blue;
  display: flex;
  flex: 0 0 85%;
  max-height: 85%;
  flex-direction: row;
  height: 400px;
}
.navigator {
  background-color: red;
  display: flex;
  flex: 0 0 15%;
  max-height: 15%;
  flex-direction: row;
  height: 400px;
}

<div class="outer">
  <div class="main" >
    <!-- this container should have 85% of the outer containers height -->
  </div>
  <div class="navigator" >
    <!-- this container should have 15% of the outer containers height -->
  </div>
</div>

Answer 1

您可以在没有 flex 的情况下进行初始(外部)布局，因为当不需要它时我看不到要点。

不过，要求是相同的，.outer 的父级需要一个高度，可以继承，也可以设置。

html, body {
  height: 100%;
  margin: 0;
}
.outer {
  height: 100%;
}
.main {
  background-color: blue;
  height: 85%;
  display: flex;            /* this is for main's children */
  flex-direction: row;      /* this is for main's children */
}
.navigator {
  background-color: red;
  height: 15%;
  display: flex;            /* this is for nav's children */
  flex-direction: row;      /* this is for nav's children */
}

<div class="outer">
  <div class="main" >
    <!-- this container should have 85% of the outer containers height -->
  </div>
  <div class="navigator" >
    <!-- this container should have 15% of the outer containers height -->
  </div>
</div>