Equal height columns with display flex and its child height in percentage

Question

My problem is I want 2 columns with same height, and I used for this display: flex in container. One of this columns has a child, and I want this child have percentage of parents, but it inherit the percentage from the body.

This is my example code:

<style>
  .container {
    display: flex;
  }
  .container > div {
    float: left;
    width: 200px;
  }
  .parent1 {
    border: solid 1px red;
  }
  .parent2 {
    border: solid 1px blue;
  }
  .child {
    background-color: yellow;
    height: 100%; /*the problem is here, the div inherit the height of the body*/
  }
</style>
<div class="container">
  <div class="parent1">
    dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
  </div>
  <div class="parent2">
    <div class="child">
      child
    </div>
  </div>
</div>

You want the child to have a percentage height of the parent. But what is the height of the parent? — Michael Benjamin, Nov 07 '15 at 12:32
Percentage heights don't work that way in CSS: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Nov 07 '15 at 12:49
So, I have to set the same height in both parent? And if the content of one parent is larger in height than parent, how can I fix the the heights of both parents to have same height? — Laurianti, Nov 07 '15 at 12:56
Flexbox gives you equal height columns by default. You don't need to use percentage heights. Look into `flex-basis`, `flex-grow` and `flex` properties. — Michael Benjamin, Nov 07 '15 at 14:49

woestijnrog · Accepted Answer · 2015-11-07T15:49:56.447

2

Height doesn't work like that with flex-boxes. But you can use nested flex-boxes to make the child grow.

.container {
  display: flex;
}
.container > div {
  float: left;
  width: 200px;
}
.parent1 {
  border: solid 1px red;
}
.parent2 {
  border: solid 1px blue;
}
.child {
  background-color: yellow;
  /* Remove the following line */
  /* height: 100%;  the problem is here, the div inherit the height of the body */
}

/* Add this */

.parent2 {
  display: flex;
  flex-direction: column; /* To have several children with % heights */
}
.child {
  flex: 1 0 0px;
}
.child+.child {
  background: aqua;
}

<div class="container">
  <div class="parent1">
    dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
  </div>
  <div class="parent2">
    <div class="child">
      child
    </div>
    <div class="child">
      child
    </div>
  </div>
</div>

edited Nov 07 '15 at 15:49

answered Nov 07 '15 at 12:52

woestijnrog

1,549
12
9

Ok, but if I want two childs in parent2 width 50% of height? – Laurianti Nov 07 '15 at 12:59
@user3802281 Turn your parent in a flexbox with flex-direction column. Use the flex-grow factor to establish the ratio between the heights. See my update answer – woestijnrog Nov 07 '15 at 13:10
1

@user3802281 Can you accept my answer? Only if you think it is worth it, of course. – woestijnrog Nov 07 '15 at 19:19
Sorry, but if I want only a child with the height equal to half of the parent? – Laurianti Nov 17 '15 at 18:00
Leave the second div empty, use `visibility: hidden;` on the second div or use a pseudo-element on the parent? – woestijnrog Nov 17 '15 at 18:15

Equal height columns with display flex and its child height in percentage

1 Answers1