Setting percentage heights to flex items when container has dynamic height

Question

I have a simple wrapper with 2 div elements in it.

I want the first one to gain 85% of the height and the second one to gain only 15% of the height.

It works when I set a fixed height to the wrapper. Though sadly my wrapper has a dynamic height.

Do you know how I can accomplish this?

I have also provided a plunker: http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview

Code:

.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>

There has to be a method of determining the height of the parent up the chain..if you can't do that it won't work. Where is your wrapper gettig it's height from etc? — Paulie_D, Feb 03 '16 at 14:38
its all a dynamic height. all done with flexbox css. i am using angular material design. so i guess ill have to write an eventlistener on rendering so that i can specifiy the height of the element? — JuHwon, Feb 03 '16 at 14:50
Thing is it *will* work provided the wrapper height (flex:1) can be determined by the flexbox...if your chain *up* isn't complete...it breaks. — Paulie_D, Feb 03 '16 at 14:53
waiting for a context that would show how heights are being determinated, i come up with an example within flex imbrication where height should be usable or something alike with the flex properties : flex:85; & flex:15; http://codepen.io/gc-nomade/pen/pgOjXB — G-Cyrillus, Feb 03 '16 at 15:04

score 1 · Answer 1 · edited May 23 '17 at 12:15

You can try sizing the flex items with flex-grow instead of flex-basis or height.

In the following example, one flex item will occupy 85% of the available space in the container. The other flex item will take the remaining 15%.

HTML (no changes)

CSS

.outer {
  display: flex;
  flex-direction: column;
}

.main {  flex-grow: 85; }
.navigator { flex-grow: 15; }  /* flex-grow: 1 would work as well */

Revised Plunkr

Learn more about flex heights here: Heights rendering differently in Chrome and Firefox

Asons · Accepted Answer · 2016-02-04T16:41:30.087

You can do the initial (outer) layout without flex, as I can't see the point when it's not needed.

The requirement is the same though, that the .outer's parent need a height, either inherited or set.

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>

G-Cyrillus · Answer 3 · 2016-02-16T00:09:09.373

if they are direct childs of body, then you first need to set height on patrents : html & body in order to have an inheritable value.

then outer is no longer needed, body is there already.

Set height to the smallest (and eventually a min-height) and request the other to grow via just : flex:1;.

html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  background: tomato;
}
.navigator {
  height: 15%;
  min-height: 2em;
  background: lime;
}

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

http://plnkr.co/edit/R502OvyV2RR8GZ96UJvt?p=preview

comment pulled up here :

@JuHwon then, does the parent has a known size that it can be inherited. could you set up an example that shows your trouble. % values need a reference to calculate a ratio from it, within flex imbrication height should be usable or something like flex:85; & flex:15; http://codepen.io/gc-nomade/pen/pgOjXB

thanks for your quick answer. sadly they are not children of body. these are elements (tiles) deep in the html structure.. i can not get this work with a wrapper. — JuHwon, Feb 03 '16 at 14:48
@JuHwon then, does the parent has a known size that it can be inherited. could you set up an example that shows your trouble. % values need a reference to calaculate a ratio from it, within flex imbrication height should be usable or something like flex:85; & flex:15; http://codepen.io/gc-nomade/pen/pgOjXB — G-Cyrillus, Feb 03 '16 at 15:02

Setting percentage heights to flex items when container has dynamic height

3 Answers3