2.7.2 #permalink growChildren

Toggle example guides Toggle HTML markup

Here's a nice little hack to allow your elements to fill vertical space. Helpful when you have two columns of slightly different height that you want to align vertically. Previously we would have done this with the equalHeight javascript.

The trick is to change the parent's flex-direction to column (note that the parent must have grid-parent!), then to apply flex-grow:1 to the children you want to grow to fill the empty space.

Example

The problem:

a short column
a taller column
a taller column

The solution:

a short column
a taller column
a taller column

By adding flex_grow1 to all children the extra space will be distributed among all children:

The first thing that's short
The second thing that's also short
The third thing. still short
Now here comes another list and the things in it are longer
Yep, the things in this list are longer. I guess we just had more to say.
This third one could be super long, and it'll just happily take up as much space as it needs to to fit all the content in it. And its friends over there on the left, they'll all just grow to distribute the extra space in their column. Neat!

You can even selectively grow only some components so other things stay lined up:

The heading
a little bit of content
The heading
way more content I mean like a lot this white box could get really tall, you guys.

but seriously can you even imagine how tall this box could get? what's the biggest number, like 8? it could be 8 lines tall.

Note that I've just been using these classes on the smaller side, but for maximum flexibility (especially if the content is user-generated), better to put them on both sides.

Markup
<h4>The problem:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a short column</div></div>
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a taller column<br/>a taller column</div></div>
</div>
<h4>The solution:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren"><div class="grid-12 col_white flex_grow1">a short column</div></div>
  <div class="grid-6 box_padded1"><div class="grid-12 col_white">a taller column<br/>a taller column</div></div>
</div>
<h4>By adding flex_grow1 to all children the extra space will be distributed among all children:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The first thing that's short</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The second thing that's also short</div>
    </div>
    <div class="grid-12 col_ggPrimary3 col_whiteText layout_center box_padded1 grid-parent layout_centerVertical flex_grow1">
      <div>The third thing. still short</div>
    </div>
  </div>
  <div class="grid-6 box_padded1 grid-parent">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">
      <div>Now here comes another list and the things in it are longer</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1">
      <div>Yep, the things in this list are longer. I guess we just had more to say.</div>
    </div>
    <div class="grid-12 col_ggPrimary3 col_whiteText layout_center box_padded1">
      <div>This third one could be super long, and it'll just happily take up as much space as it needs to to fit all the content in it. And its friends over there on the left, they'll all just grow to distribute the extra space in their column. Neat!</div>
    </div>
  </div>
</div>
<h4>You can even selectively grow only some components so other things stay lined up:</h4>
<div class="grid-parent col_ggSecondary1Dark">
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">The heading</div>
    <div class="grid-12 col_white box_padded1 layout_center grid-parent layout_centerVertical flex_grow1">
      <div>a little bit of content</div>
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1"><a href="" class="btn">the cta</a></div>
  </div>
  <div class="grid-6 box_padded1 grid-parent flex_growChildren">
    <div class="grid-12 col_ggPrimary1 col_whiteText layout_center box_padded1">The heading</div>
    <div class="grid-12 col_white box_padded1 layout_center flex_grow1">
      way more content I mean like a lot this white box could get really tall, you guys.
      <br/><br/>
      but seriously can you even imagine how tall this box could get? what's the biggest number, like 8? it could be 8 lines tall.
    </div>
    <div class="grid-12 col_ggPrimary2 col_whiteText layout_center box_padded1"><a href="" class="btn">the cta</a></div>
  </div>
</div>
<h4>Note that I've just been using these classes on the smaller side, but for maximum flexibility (especially if the content is user-generated), better to put them on both sides.
Source: layout/flex.less, line 12