使用 flexbox 创建相同高度的卡片列表答案

【问题标题】：Creating list of cards of same height with flexbox使用 flexbox 创建相同高度的卡片列表
【发布时间】：2020-01-18 13:03:56
【问题描述】：

我正在尝试制作具有相同宽度和相同高度的卡片列表。我正在使用 flex、bootstrap 和一些 adminlte 行。

我的问题是，当一些带有文本的标签比其他标签大时，卡片的高度会改变以填充内容，它们会变成不同的高度。

这是小提琴： https://jsfiddle.net/b5d8u06m/

标记 css

<style>
    .medicos {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
     }
    .medicos::after {
                content: "";
                flex: auto;
            }

    .item {
                flex: 1; 

     }

    .btn_hora {
                margin: 5px;
}
</style>

【问题讨论】：

将display: inline-flex; 添加到.item

标签： html twitter-bootstrap flexbox

【解决方案1】：

尝试使用垂直滚动条和最大高度。

滚动条：https://www.w3schools.com/cssref/pr_pos_overflow.asp

身高：https://www.w3schools.com/cssref/pr_dim_max-height.asp

【讨论】：

【解决方案2】：

.item {
    flex: 1;
    display: flex;
}

.widget-user-2 .widget-user-header {
    padding: 20px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    height: 150px;
    max-height: 100%;
}

【讨论】：