Boostrap flexbox same width children

Question

I have a flex box container in which the children are displayed in a flex-row. Im trying to use bootstrap and make all the children the same width and height.

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>

Here is an image of what it currently looks like. You can see that the deposit and loan rates box is wider then the more box:

Answer 1

Add for all children, this:

 flex: 1 1 0;