等高的flexbox，容器的内容填充高度答案

【问题标题】：Flexboxes of equal height, content filling height of container等高的flexbox，容器的内容填充高度
【发布时间】：2014-10-07 05:49:07
【问题描述】：

链接到我正在编辑的站点以供参考：http://securitysolutionsnw.businesscatalyst.com/fire-life-safety

这是一个 CodePen： http://codepen.io/Murgittroyd/pen/HqEvp

我有一个列表项的无序列表，我试图让每个项目的宽度和高度相同。我已经开始调查和使用 flex-box，这很有帮助，但我无法让每个框的内容填满列表项的整个高度。从本质上讲，我需要动态调整大小的盒子，但要按照最大的弹性盒子的大小......有人有什么想法吗？

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

【问题讨论】：

flexbox still requires vendor prefixes 在很多情况下；您可能希望在 flex 容器上指定许多属性，例如 align-content: stretch; 和 flex-direction: row;。 here 是一个可以垂直拉伸以匹配最大项目的 flexbox 的工作小提琴。 here 是一个学习 flexbox 的工具
我认为如果没有一些 js 糖，这是不可能的。
奇怪的是，将 <li> 元素上的 line-height 设置为 0 似乎对我来说可以让列表项包含其内容。

标签： html css flexbox

【解决方案1】：

纯 CSS 是否可行取决于您的具体需求。如果您只需要让每一行 li 项目的高度相同，那么您已经做对了。正如您在任何 Element 检查工具中看到的那样，一行中的 li 项目的高度都相同（至少在我的 Chrome 浏览器中）。但是，li 的内容不会缩放以填满整个高度。

如果您需要页面上的每个元素都具有相同的高度，您可能需要一些 JS。

【讨论】：

你认为有办法让内容填满父元素的整个高度吗？
这真的取决于你的内容有多动态，但你可以例如为你设置背景颜色li，这样它就会填满整个框。

【解决方案2】：

所以我找到了一种解决方案，只是将整个li 屏蔽为与.content 相同，因为（正如Wouter Florijn 指出的那样）li 已经是相同的高度，因为使用弹性。这是我更改一些 CSS 的方法，基本上只是将所有 padding 更改为 margin 所以 background-color 将填充 li：

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

【讨论】：