flexで横並びになった要素の高さを揃えたいです。

Question

前提・実現したいこと

閲覧いただきありがとうございます。

flexで横並びの表を作りたいのですが、
ひとつのアイテムの高さが大きくなったとき
他のアイテムも高さが揃うようにしたいです。

発生している問題・エラーメッセージ

現在は以下の画像のように、アイテム内のテキストが増えても
高さが変わらないアイテムが存在しています。
（左の青いアイテムのみ高さが変わっています）

<div class="program">
  <div class="program-row">

    <div class="program-header">
      <p>日付</p>
      <p></p>
    </div><!-- /program-header -->

    <div class="program-area">
      <div class="program-data program-y">
        <p class="data-time">時間</p>
        <div class="data-ttl">
          <p>タイトル</p>
        </div>
      </div><!-- /program-data -->

      <div class="program-data program-p">
        <p class="data-time">時間</p>
        <div class="data-ttl">
          <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
        </div>
      </div><!-- /program-data -->

      <div class="program-data program-g">
        <p class="data-time">時間</p>
        <div class="data-ttl">
          <p>タイトル</p>
        </div>
      </div><!-- /program-data -->

    </div><!-- /program-area -->

  </div><!-- /program-row -->
</div><!-- /program -->

.program {
  text-align: center;
}

.program-row {
  display: flex;
}

.program-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 113px;
  margin-right: 2px;
  background: #395bcc;
  color: #fff;
}

.program-area {
  display: flex;
  width: 100%;
}

.program-data {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.program-data + .program-data {
  margin-left: 2px;
}

.program-data .data-time {
  padding: 5px 0;
  color: #fff;
}

.program-data .data-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 10px;
  text-align: left;
  min-height: 75px;
}

.program-weekday .program-area .data-ttl {
  flex-direction: column;
  align-items: start;
  padding-left: 30px;
  align-content: center;
  justify-content: center;
}

//色付けのCSSは省略

試したこと

デベロッパーツールで確認すると各アイテム（.program-data）の高さは変わっています。
ただ、.program-dataの子要素である.data-ttlの高さが変わっていませんでした。

flexが子要素までしか効かないことが原因だと思い、
.program-dataと.data-ttlにも、flexを適用しましたが
特に変わりませんでした。

よろしくお願いいたします。

Answer 1

こんにちは。

こういうことでしょうか？

.program-data .data-ttl {
	flex-grow: 1;
}

Comments

[退会済みユーザー]

この方法で理想通りの動きになりました！
アイテムの伸び率が同じになるから、高さも揃うようになるのですね。

1行足すだけで実現できたので驚きました！
本当にありがとうございます！