0

解決したいこと

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"> で囲まれた領域の高さが同じになるのはわかるのですが、その中身の高さが揃わないので困っています。

教えてください、

1 件の回答 1

1

下記でどうでしょうか。

.plans-contents {
  display: flex;
}

.plans-content {
  display: flex;
}

.plans-content-item {
  display: flex;
  flex-direction: column;
}
.plans-content-detail {
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.plans-content-detail-list {
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 5px;
}

.plans-content-detail-listheight: 100%;として、親要素からはみ出した部分をoverflow: hidden;で隠すという手法です。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。