css flexbox child's child element with percentage height

Question

Is it possible to use flexbox to have a div that will fill the entire remaining area (using flex-grow: 1) and have its' child div dimensions in percentages?

I tried:

<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
   <div>Hello Plunker!</div>
   <div style="background-color:green; flex-grow:1;">
      <div style="background-color: blue; height:70%; width:70%;"></div>
   </div>
</div>

Is flexbox the right way to achieve this?

Yes, it's possible. Did you try it? Your code seems to work as desired. — Oriol, Jun 29 '15 at 14:21

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

Yes, it's entirely possible as mentioned in this question

You just need to specific a height of 100% for the child (holding the grandchild element)

JSfiddle Demo

.child {
    background-color:green; 
    flex-grow:1;
    height: 100%;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 0, 0, 0.5);
}
.child {
  background-color: green;
  flex-grow: 1;
  height: 100%;
}
.g-child {
  background: blue;
  height: 70%;
  width:70%;
}

<div class="parent">
  <div>Hello Plunker!</div>
  <div class="child">
    <div class="g-child"></div>
  </div>
</div>

thanks for the answer. do i still need 'flex-grow:1' if i state that 'height:100%'? — avivr, Jun 29 '15 at 15:13

score 0 · Answer 2 · answered Jun 29 '15 at 14:24

0

Needed to set the parent div as 'position:relative;' and the child as 'position:absolute;'

<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
      <div>Hello Plunker!</div>
      <div style="background-color:green; flex-grow:1; position:relative;">
          <div style="background-color: blue; position:absolute; height:100%; width:100%;"></div>
      </div>
    </div>

answered Jun 29 '15 at 14:24

avivr

2,573
3
22
34

This really doesn't answer how to do this using **flexbox** – Paulie_D Jun 29 '15 at 14:49
@Paulie_D why not? the outer div is set to 'display: flex' – avivr Jun 29 '15 at 14:53
But that's not what your answer is...your answer is **positioning** not flexbox. – Paulie_D Jun 29 '15 at 14:54
@Paulie_D the problem was that the most-inner div (blue) was invisible (height=0) when the most-outer div (red) was set as 'display:flex'. the positioning is the way I found to make it behave as wanted. – avivr Jun 29 '15 at 15:09

css flexbox child's child element with percentage height

2 Answers2