Как распределить динамические divs вертикально, равномерно?

В принципе, я хочу, чтобы дочерние div были равномерно распределены в родительском div, и если один из дочерних divs удален, остальные должны изменить размер и снова заполнить оставшееся пространство.

Пример:

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------   

теперь, когда дочерний div удаляется, он должен стать

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------   

Теперь я хочу сделать это только с чистым html/css, но на данный момент я не могу найти решение.

Две другие альтернативы, которые я рассматриваю, заключаются в следующем:

• вычислить высоты с помощью javascript
• создать разные классы для кучи сценариев (например: родитель с 2 дочерних div, 3 дочерних div, 4 дочерних div и т.д.), А затем загружать их соответственно с php

Кто-нибудь получил лучшую идею?

Ответы

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

.parent{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.child{
  width:100%;
  height:100%;
}