如何在不同高度的div中垂直放置4个盒子？

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 400px; /* 设置父容器div的高度 */
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>