Flexbox无法正常工作-物品变小

Question

尝试制作稳定的2 x 2网格时遇到一些问题。

想法：
我想要一个图标网格，无论里面有多少个物品（最多4个），它始终保持不变。

因此，我创建了一个像这样的块：

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">
    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>
    </div>
</div>

（不要介意<font-awesome-icon>标签-我在这里创建Vuejs应用）

当我里面有4个物品时，效果很好。
但是，当我移除一个容器时，整个容器会收缩-移除另一个容器->它会再次收缩。

是否有一种方法可以以响应方式灵活地实现这种网格？

谢谢！