【发布时间】：2022-01-23 16:13:09
【问题描述】：
我正在尝试创建一个响应式卡片组件，其标题是整体卡片高度的百分比，并且驻留在拉伸的 flex 子项中。如果我对标题的高度使用百分比值，则会导致溢出。
html, body {
margin: 0;
padding: 0;
}
/* Grid */
.recipe-grid {
display: flex;
flex-wrap: wrap;
margin-top: -1%;
}
.recipe-grid__cell {
margin: 1%;
min-width: 300px;
width: 31%;
}
/* Recipe Card */
.recipe-card {
border: 1px solid #e5e5e5;
height: 100%;
padding: 8px;
text-align: left;
width: 100%;
}
.recipe-card__header {
background-color: beige;
height: 35%;
/* height: 131px; */ /* works */
}
.recipe-card__title {
padding: 6px 0;
}<div class="recipe-grid">
<div class="recipe-grid__cell">
<div class="recipe-card">
<div class="recipe-card__header"></div>
<div class="recipe-card__body">
<div class="recipe-card__title">
<h3 class="recipe-card__heading">
This is a post title
</h3>
</div>
<div class="recipe-card__content">
Morbi tincidunt nulla neque, et viverra sapien consectetur sit amet. Nunc auctor, purus non iaculis interdum, mauris velit mattis ante, eget efficitur nibh ante nec nulla. Pellentesque consectetur erat ut fringilla finibus. Nunc ullamcorper semper sollicitudin. Donec scelerisque elit sit amet lectus imperdiet aliquet. Curabitur fringilla non augue in rhoncus. Integer lacus magna, aliquet vitae felis quis, molestie facilisis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras imperdiet eget metus tempus lacinia.
</div>
<a class="recipe-card__button" href="#">
Read More
</a>
</div>
</div>
</div>
<div class="recipe-grid__cell">
<div class="recipe-card">
<div class="recipe-card__header"></div>
<div class="recipe-card__body">
<div class="recipe-card__title">
<h3 class="recipe-card__heading">
This is a longer post title that is multiple lines
</h3>
</div>
<div class="recipe-card__content">
Morbi tincidunt nulla neque, et viverra sapien consectetur sit amet. Nunc auctor, purus non iaculis interdum, mauris velit mattis ante, eget efficitur nibh ante nec nulla. Pellentesque consectetur erat ut fringilla finibus. Nunc ullamcorper semper sollicitudin. Donec scelerisque elit sit amet lectus imperdiet aliquet. Curabitur fringilla non augue in rhoncus. Integer lacus magna, aliquet vitae felis quis, molestie facilisis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras imperdiet eget metus tempus lacinia.
</div>
<a class="recipe-card__button" href="#">
Read More
</a>
</div>
</div>
</div>
<div class="recipe-grid__cell">
<div class="recipe-card">
<div class="recipe-card__header"></div>
<div class="recipe-card__body">
<div class="recipe-card__title">
<h3 class="recipe-card__heading">
This is a post title
</h3>
</div>
<div class="recipe-card__content">
Morbi tincidunt nulla neque, et viverra sapien consectetur sit amet. Nunc auctor, purus non iaculis interdum, mauris velit mattis ante, eget efficitur nibh ante nec nulla. Pellentesque consectetur erat ut fringilla finibus. Nunc ullamcorper semper sollicitudin. Donec scelerisque elit sit amet lectus imperdiet aliquet. Curabitur fringilla non augue in rhoncus. Integer lacus magna, aliquet vitae felis quis, molestie facilisis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras imperdiet eget metus tempus lacinia.
</div>
<a class="recipe-card__button" href="#">
Read More
</a>
</div>
</div>
</div>
</div>Example JSFiddle here -- Best viewed with the bottom results layout
结果 Result
预期 Expected
是否可以在不导致溢出的情况下让标题占整个卡片高度的百分比，同时让所有 flex 子级保持相同的高度？
编辑
似乎使用带有百分比值的padding-top 而不是height 会导致card 和flex child 正确调整大小并且内容不再溢出。 Example
【问题讨论】：
-
尝试最小高度：recipe-card_header 上的 30%
-
你的问题是你有一个固定的高度，所以不管它里面是什么，如果它溢出，它就会越过边界，你可以使用 overflow-y 来调整它
-
@jorge-guerreiro 如果我去掉卡片上的百分比高度并一直使用 Flexbox，内容仍然会溢出。 Example