How to set a child's height relative to its flex-grown parent?

Question

In the following example, using flex-box layout, I need the black boxes' height to be 50% of the blue box's height.
The blue box has style flex-grow: 1 so that it occupies all remaining space inside the red box.

Is it even possible to do this with the flex-box layout?
If not, is there any other way with pure CSS and no table layouts?

* {box-sizing: border-box}
div {padding: 5px; border: 1px solid red ; display: flex }
col1 {border: 1px solid green}
col2 {flex-grow: 1; border: 1px solid blue; padding: 10px; margin-left: 5px}
item {display: inline-block; border: 1px solid black; width: 30% ; height: 50%}

<div>
<col1>
Content
<br><br><br><br><br>
of
<br><br><br><br><br>
this
<br><br><br><br><br>
column
</col1>
<col2>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
</col2>
</div>

Nenad Vracar · Answer 1 · 2016-04-09T18:22:31.117

3

You could create pseudo elment on parent and use flex: 1 on it so it will take half of its height and other half will take child element

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}
.parent {
  flex-grow: 1;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border: 1px solid blue;
}
.random {
  padding: 20px;
  margin-right: 20px;
  border: 1px solid green;
}
.parent:after {
  content: '';
  flex: 1;
}
.child {
  flex: 1;
  border: 1px solid red;
}

<div class="content">
  <div class="random">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="parent">
    <div class="child">asd</div>
  </div>
</div>

edited Apr 09 '16 at 18:22

answered Apr 09 '16 at 18:03

Nenad Vracar

118,580
15
151
176

You set the outer box's height to `100vh`. I need the height to be dynamic. – GetFree Apr 09 '16 at 18:13
I forgot to mention a small detail. There's supposed to be several black boxes inside the blue box. I updated the question. – GetFree Apr 09 '16 at 18:40
@NenadVracar, the black boxes should flow horizontally like inline-blocks. – GetFree Apr 09 '16 at 18:46

How to set a child's height relative to its flex-grown parent?

1 Answers1