解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-title">タイトル1</h3>
<div class="plans-content-detail">
<div class="plans-content-detail-title">
詳細タイトル1
</div>
<div class="plans-content-detail-list">
<ul>
<li class="content-detail-list-item">アイテム1</li>
<li class="plans-content-detail-list-item">アイテム2</li>
<li class="plans-content-detail-list-item">アイテム3</li>
<li class="plans-content-detail-list-item">アイテム4</li>
<li class="plans-content-detail-list-item">アイテム5</li>
</ul>
</div>
</div>
</div>
</div>
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-title">タイトル1</h3>
<div class="plans-content-detail">
<div class="plans-content-detail-title">
詳細タイトル1
</div>
<div class="plans-content-detail-list">
<ul>
<li class="content-detail-list-item">アイテム1</li>
<li class="plans-content-detail-list-item">アイテム2</li>
<li class="plans-content-detail-list-item">アイテム3</li>
<li class="plans-content-detail-list-item">アイテム4</li>
</ul>
</div>
</div>
</div>
</div>
上の要素を
<div class="plans-contents"></div>
というHTMLで囲っています
CSSは
.plans-contents {
display: flex;
}
.plans-content {
display: flex;
}
// リストを縦方向に並べる
.plans-content-detail-list {
display: flex;
flex-direction: column;
}
としたのですが、
<div class="plans-content-detail-list">
で囲まれた領域がliタグの数によって伸び縮みしてしまいます。(下記の画像参照)
flexboxを使っているので、 <div class="plans-content-detail">
で囲まれた領域の高さが同じになるのはわかるのですが、その中身の高さが揃わないので困っています。
教えてください、