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

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

Пример:

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

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

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

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

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

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

У кого-нибудь есть идея получше?

Ответы на вопрос(3)

Ваш ответ на вопрос