Flexbox内卡片负间距均匀分布实现问题求助

我想让Flexbox容器内的卡片像示例中那样，根据父div的高度均匀分布，但一直没实现。gap不支持负值，margin-top: auto也不能设为负，其他方案还会修改卡片的高度。另外卡片数量是动态变化的，必须保证所有卡片都完整显示在屏幕内。

现有代码如下：

HTML代码 #

<div id="Page2">
    <template id="card">
        <div class="cardDesign">
            <h2></h2>
            <img id="CardLogo" src="/img/kidebit_logo_outline.png" alt="">
            <img id="NFCicon" src="img/NFC.png" alt="">
        </div>
    </template>
</div>

CSS代码 #

#Page2 {
    display: flex;
    flex-direction: column;
    height: 50vh;
    width: 100%;
    align-items: center;
    padding-top: 200px;
    max-width: 332px;
}

.cardDesign {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px;
    width: 100%;
    height: 182px;
    margin-top: -140px;
}

核心思路 #

放弃负margin的重叠方案，利用Flexbox的空间分配属性实现均匀分布，同时保留卡片固定高度，确保所有卡片完整显示。

修改后的CSS代码 #

#Page2 {
    display: flex;
    flex-direction: column;
    height: 50vh;
    width: 100%;
    align-items: center;
    max-width: 332px;
    /* 关键：自动在卡片间均匀分配空白 */
    justify-content: space-around;
    /* 可选：若不需要容器上下空白，改用space-between+上下内边距 */
    /* justify-content: space-between;
    padding: 20px 0; */
    /* 卡片过多时启用滚动，避免溢出 */
    overflow-y: auto;
    scrollbar-width: thin;
}

.cardDesign {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px;
    width: 100%;
    height: 182px;
    /* 移除负margin，防止卡片重叠 */
}

关键说明 #

• 动态数量适配：space-around会根据卡片数量自动分配卡片间及容器上下的空白；space-between则只在卡片间分配空白，适合需要容器上下贴边的场景。
• 溢出处理：当卡片数量超过容器高度时，overflow-y: auto会生成滚动条，保证所有卡片都能被查看，同时不破坏布局。

内容的提问来源于stack exchange，提问作者antvrn