Flexboxes of equal height, content filling height of container

Link to the site I'm editing for reference: http://securitysolutionsnw.businesscatalyst.com/fire-life-safety

Here's a CodePen of the thing: http://codepen.io/Murgittroyd/pen/HqEvp

I have an unordered list of list items, and I'm trying to get each item to be the same width and height. I've started investigating and using flex-box, which helped, but I can't get the content of each box to fill the whole height of the list item. Essentially, I need boxes that are dynamically sized but by the size of the largest flexbox...anyone have any ideas?

HTML:

<ul class="box-list">
    <li>
        <div class="visual">
            <img src="/images/img07.jpg" width="281" height="187" alt="image description" />
            <div class="hover">
                <a href="/fire-life-safety/fire-extinguishers">
                    <span class="ico"><img src="/images/ico-fire-extinguishers-white-large.png" alt="image description" /></span>
                    <span class="text">Learn More</span>
                </a>
            </div>
        </div>
        <div class="content">
            <h3>
                <span class="ico"><img src="/images/ico-fire-extinguishers-white.png" alt="image description" /></span>
                <span class="text">Fire Extinguishers</span>
            </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur sed sem ac facilisis. Proin venenatis nisi ut  elit a scelerisque. </p>
        </div>
    </li>
</ul>

CSS:

#content .box-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -14px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
}
#content .box-list li {
    float: left;
    padding: 0 14px 43px 0;
    width: 281px;
}
#content .box-list li:after {
    display: none;
}
#content .box-list .content {
    overflow: hidden;
    padding: 18px 20px 33px 33px;
    background: #232a32;
}
#content .box-list .visual {
    position: relative;
    overflow: hidden;
}