Boostrap flexbox детей той же ширины

Question

У меня есть контейнер для флекс-бокса, в котором дочерние элементы отображаются во флекс-ряду.Я пытаюсь использовать начальную загрузку и сделать все дети одинаковой ширины и высоты.

HTML

<div class="d-flex flex-row flex-grow">
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book-heart fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Procedures.aspx">Procedures</a></p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white">​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/KB/Forms/Quick%20Reference%20Guides.aspx">Quick Reference Guides</a> </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="http://helpdesk:8080/Templates.do?module=mergedRequest&amp;serviceId=3002">Stan​dardized
                Forms</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-user fa-2x color-white">​​​​​​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Member%20Forms.aspx">Member Forms</a>​​​​​​​​​ </p>
    </div>
</div>
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-link fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/Lists/Links/AllItems.aspx">Canvas Links</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/RatesFees/Forms/Rates%20and%20Fees.aspx">Deposit and Loan
                Rates</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">&#160;<a href="/compass/Policies/Forms/Policies.aspx">Policies</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-download fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3"><a href="/compass/#ByTopicAnchor">More</a>​​</p>
    </div>
</div>

Вот изображение того, чтов настоящее время это выглядит так.Вы можете видеть, что поле депозитов и ставок по кредитам шире, чем поле больше:

Answer 1

Добавить для всех детей, это:

 flex: 1 1 0;