横並びのカードの中身の高さを合わせたい
解決したいこと
横並びのカードの中身の高さをあわせたい
発生している問題
flex-grow: 1;が効かない
<ul class="plan_list">
<li class="plan_item">
<h5 class="plan_title">
タイトルタイトルタイトル
</h5>
<p class="suggest">
おすすめおすすめおすすめ<br>おすすめ
</p>
<p class="plan_sub_title">
サブタイトルサブタイトル
</p>
<p class="plan_money">
<span class="money">5〜15</span>円
</p>
<p class="separately">
※別途 費用が掛かります。
</p>
</li>
<li class="plan_item">
<h5 class="plan_title">
タイトルタイトルタイトル
</h5>
<p class="suggest">
おすすめおすすめおすすめ<br>おすすめおすすめおすすめおすすめおすすめ
</p>
<p class="plan_sub_title">
サブタイトルサブタイトル
</p>
<p class="plan_money">
<span class="money">35</span>円
</p>
<p class="separately">
※別途 費用が掛かります。
</p>
</li>
<li class="plan_item">
<h5 class="plan_title">
タイトルタイトルタイトル
</h5>
<p class="suggest">
おすすめおすすめおすすめ<br>おすすめおすすめ
</p>
<p class="plan_sub_title">
サブタイトルサブタイトル
</p>
<p class="plan_money">
<span class="money">70</span>円
</p>
<p class="separately">
※別途 費用が掛かります。
</p>
</li>
</ul>
.plan_list {
margin-top: 25px;
margin-bottom: 25px;
display: flex;
justify-content: space-around;
align-items: center;
gap: 15px;
}
.plan_item {
box-shadow: 0 0 8px 4px rgba(165, 165, 165, .25);
width: 30%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.plan_title {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
}
.suggest {
color: #555F93;
font-size: 24px;
margin-bottom: 15px;
flex: 1 auto;
height: 100%;
}
.plan_sub_title {
font-size: 16px;
margin-bottom: 10px;
}
.plan_money {
font-size: 40px;
margin-bottom: 10px;
}
.money {
color: #FF7A00;
}
.separately {
font-size: 14px;
margin-bottom: 20px;
}
0