

## 解決したいこと

cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです

## 状況

下記のコードがHTMLです。

[code]

    <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>
    
[/code]

上の要素を

[code]

    <div class="plans-contents"></div>
    
[/code]

というHTMLで囲っています

CSSは

[code]

    .plans-contents {
      display: flex;
    }
    
    .plans-content {
      display: flex;
    }
    
    // リストを縦方向に並べる
    .plans-content-detail-list {
      display: flex;
      flex-direction: column;
    }
    
[/code]

としたのですが、  
`<div class="plans-content-detail-list">`
で囲まれた領域がliタグの数によって伸び縮みしてしまいます。（下記の画像参照）

[![画像の説明をここに入力](https://i.stack.imgur.com/dB85H.png)](https://i.stack.imgur.com/dB85H.png)

flexboxを使っているので、 `<div class="plans-content-detail">`
で囲まれた領域の高さが同じになるのはわかるのですが、その中身の高さが揃わないので困っています。

教えてください、


CC BY-SA 4.0
2021-01-19T12:32:55.167
73412
2021-01-20T02:12:38.140
2021-01-19T12:55:23.203
3060
9542
question
html css sass
flexboxで要素の高さが揃わない


下記でどうでしょうか。

[code]

    .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;
    }
    
[/code]

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


CC BY-SA 4.0
2021-01-20T02:12:38.140
73423
2021-01-20T02:12:38.140
42240
73412
answer