Q:

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;
}

A:

Whether or not it's possible with pure CSS depends on your exact needs. If you just need to have each row of li items the same height, then you're already doing it correct. As you can see with any Element inspection tool, the li items in a row are all the same height (in my Chrome browser at least). However, the content of your li isn't scaled to fill the full height.
If you need EVERY element on the page the same height, you probably need some JS.

