高度相等的Flexbox，容器的内容物填充高度

Question

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

Answer 1

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.

Answer 2

So I've found a solution of sorts, just masking the entire li to appear the same as the .content , since (as Wouter Florijn pointed out) the li were already the same heights due to using flex. Here's how I changed some CSS, basically just changed all padding into margin so background-color would fill the li :

#content .box-list li {
float: left;
padding: 0 0 0 0;
margin: 0px 14px 43px 0px;
width: 281px;
background-color: #232a32;
}