Css 使用.d-flex和.flex-fill使卡片具有相同的高度

根据在那里找到的答案：

我设法使一些卡片在另一张卡片中具有相同的高度和宽度

但是在下面的例子中，高度是不一样的

我做错了什么

<div class="row row-cols-1 row-cols-md-2">
<div class="d-flex col mb-3">
    <doors class="flex-fill">
        <div class="card">
            <div class="card-header"> AAA </div>
            <div class="card-body">
                <ul class="list-group">
                    <door>
                        <li class="list-group-item">A1</li>
                    </door>
                    <door>
                        <li class="list-group-item">A2</li>
                    </door>
                </ul>
            </div>
        </div>
    </doors>
</div>
<div class="d-flex col mb-3">
    <commands class="flex-fill">
        <div class="card">
            <div class="card-header"> BBB </div>
            <div  class="card-body">
                <ul class="list-group">
                    <command>
                        <li class="list-group-item">B1</li>
                    </command>
                    <command>
                        <li class="list-group-item">B2</li>
                    </command>
                    <command>
                        <li class="list-group-item">B3</li>
                    </command>
                </ul>
            </div>
        </div>
    </commands>
</div>

AAA

A1
A2

BBB

B1
B2
B3

这是从我的angular应用程序中编译出来的html，为了便于阅读，我对其进行了清理

我尝试将

.flex-fill

移动到卡，将

.d-flex

移动到卡的直接父级和一些其他变体，但结果保持不变

---

你可以在这里看到它：列的高度相同，但卡片需要填充列的高度。为此使用

h-100

<div class="row row-cols-1 row-cols-md-2">
    <div class="d-flex col mb-3">
        <doors class="flex-fill">
            <div class="card bg-inf h-100">
                <div class="card-header"> AAA </div>
                <div class="card-body">
                    <ul class="list-group">
                        <door>
                            <li class="list-group-item">A1</li>
                        </door>
                        <door>
                            <li class="list-group-item">A2</li>
                        </door>
                    </ul>
                </div>
            </div>
        </doors>
    </div>
    <div class="d-flex col mb-3">
        <commands class="flex-fill">
            <div class="card h-100">
                <div class="card-header"> BBB </div>
                <div class="card-body">
                    <ul class="list-group">
                        <command>
                            <li class="list-group-item">B1</li>
                        </command>
                        <command>
                            <li class="list-group-item">B2</li>
                        </command>
                        <command>
                            <li class="list-group-item">B3</li>
                        </command>
                    </ul>
                </div>
            </div>
        </commands>
    </div>
</div>

AAA

A1
A2

BBB

B1
B2
B3

---

我有点困惑，我让它在另一张卡中的卡上没有

h-100

的情况下工作。无论如何，

h-100

在这种情况下修复了它。谢谢