After following the solution provided here: How to make Bootstrap 4 cards the same height in card-columns?
I successfully achieved uniform height and width for some cards nested within another card.
However, in a different scenario, the heights of the cards are not consistent.
What am I doing incorrectly?
<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>
This is the modified HTML snippet from my Angular application that has been cleaned up for better readability.
I have attempted several adjustments such as moving .flex-fill to the card and using .d-flex on the immediate parent of the card, but the issue persists.
You can view the problem live at : https://codepen.io/Ell0ne/pen/QWKGNRd