如何在子div之间划分父div的高度

Question

I have a random number of child div. The parent div height is known and fixed. I want the child divs' height to be the parent div's height divided by the number of child divs. (In my example there is two child divs but i can't know how many child divs there will be)

HTML

<div class="calendar-default">
   <div class="calendar-plage" style="background-color: red;">&nbsp;</div>
   <div class="calendar-plage" style="background-color: green;">&nbsp;</div>
</div>

CSS

.calendar-default{
    background-color: black;
    position: relative;
    height: 100px;
    width: 100px;
}

.calendar-plage{
    height: auto; /* ??? */
}

The Fiddle explain my problem best : https://jsfiddle.net/z2anpsy7/

I managed to do it with javascript but i'd like to do it with CSS only. Is it possible ?

Ps: It's inside an AngularJS app, if you know an elegant angular way of solving my problem it's also great !

Answer 1

You can do this with flexbox and flex-direction: column;

.calendar-default {
  background-color: black;
  position: relative;
  height: 100px;
  display: flex;
  flex-flow: column wrap;
}
.calendar-plage {
  flex: 1 0 auto;
}

<h2>2 children</h2>
<div class="calendar-default">
  <div class="calendar-plage" style="background-color: red;">&nbsp;</div>
  <div class="calendar-plage" style="background-color: green;">&nbsp;</div>
</div>

<h2>3 children</h2>
<div class="calendar-default">
  <div class="calendar-plage" style="background-color: red;">&nbsp;</div>
  <div class="calendar-plage" style="background-color: green;">&nbsp;</div>
  <div class="calendar-plage" style="background-color: blue;">&nbsp;</div>
</div>

Answer 2

To spread the childs horizontally, we use display: table-cell and to spread the childs vertically, we can use display: table-row. But display: table-row needs some content in it, which I am providing through pseudo element as you can see in the below example.

Try to add more childs, they spread and fit inside the parent container automatically.

.parent {
    height: 100px;
    width: 100px;
    display: table;
    border: 1px solid black;
}
.child {
    display: table-row;
    width: 100px;
    background-color: tomato;
}
.child:nth-child(2n) {
    background-color: beige;
}
.child::after {
    content:"";
}

Working Fiddle