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

Question

我正在尝试列出宽度和高度相同的卡片。 我正在使用flex，bootstrap和一些管理命令。

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

这是小提琴： 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>

Answer 1

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

---

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

---

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

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