How to divide parent div's height between child divs - html

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;"> </div>
<div class="calendar-plage" style="background-color: green;"> </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;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>
<h2>3 children</h2>
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
<div class="calendar-plage" style="background-color: blue;"> </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

Answer 3

.calendar-default{
position: relative;
height: 100px;
width: 100px;
}
.calendar-plage{
height:50%
}
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>