flexboxで横並びにした孫要素？の縦幅を一緒にしたい

右のテキスト部分の高さを左と同じ高さにしたいです。お力添えいただけますでしょうか。

html
1<div class="voice_items">
2            <div class="voice_item">
3                <div class="voice_item_top">
4                    <img src="img/home/btn_4.png" alt="">
5                    <p>マンツーマン指導でメリハリボディ！</p>
6                </div>
7                <div class="voice_item_txt">
8                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
9                    </p>
10                </div>
11            </div>
12            <div class="voice_item">
13                <div class="voice_item_top">
14                    <img src="img/home/btn_4.png" alt="">
15                    <p>週一トレーニング</p>
16                </div>
17                <div class="voice_item_txt">
18                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
19                    </p>
20                </div>
21            </div>
22        </div>

scss
1.voice_items{
2        display: flex;
3        align-items: stretch;
4        .voice_item {
5            background: #CCCC99;
6            max-width: 440px;
7            width: 100%;
8            margin: 20px;
9            padding: 10px 20px;
10            .voice_item_top {
11                display: flex;
12                align-items: center;
13                img {
14                    height: 40px;
15                    width: 40px;
16                }
17                p {
18                    padding-left: 20px;
19                    padding-top: 10px;
20                }
21            }
22            .voice_item_txt {
23                background: #fff;
24                margin: 10px 0;
25                p {
26                    padding: 20px;
27                    font-size: 15px;
28                    font-weight: 300;
29                    line-height: 1.4;
30                }
31            }
32        }
33    }

.voice_item_txtにheight:100%では下にはみ出てしまいます。
どこをどのように指定すれば、高さが揃うのでしょうか。

行動規範の内容に同意します

回答3件

とある要素を共通の祖先要素として持つ 2 つの子孫要素の高さを揃えたいときは、共通の祖先要素から子孫要素へと辿ってゆき、 CSS Flexible Box Layout や CSS Grid Layout などを用いて高さを揃えてゆけば良いです。今回の場合、質問者さんの実現したいことは、 CSS Flexible Box Layout を用いて、以下のように行うことが出来ます(動作確認用リンク)。

HTML
1<div class="voice_items">
2  <div class="voice_item">
3    <div class="voice_item_top">
4      <img src="http://placehold.jp/ffffaa/ffffff/80x80.png?text=%20" alt="">
5      <p>マンツーマン指導でメリハリボディ！</p>
6    </div>
7    <div class="voice_item_txt">
8      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
9    </div>
10  </div>
11  <div class="voice_item">
12    <div class="voice_item_top">
13      <img src="http://placehold.jp/ffaaaa/ffffff/80x80.png?text=%20" alt="">
14      <p>週一トレーニング</p>
15    </div>
16    <div class="voice_item_txt">
17      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
18      </p>
19    </div>
20  </div>
21</div>

SCSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.voice_items {
7  display: flex;
8  .voice_item {
9    display: flex; /* 追記 */
10    flex-direction: column; /* 追記 */
11    width: 100%;
12    max-width: 440px;
13    margin: 20px;
14    padding: 10px 20px;
15    background: #cc9;
16    .voice_item_top {
17      display: flex;
18      img {
19        width: 40px;
20        height: 40px;
21      }
22      p {
23        padding-top: 10px;
24        padding-left: 20px;
25      }
26    }
27    .voice_item_txt {
28      margin: 10px 0;
29      background: #fff;
30      flex: 1; /* 追記 */
31      p {
32        font-size: 15px;
33        font-weight: 300;
34        line-height: 1.4;
35        padding: 20px;
36      }
37    }
38  }
39}
40

投稿2019/03/15 15:32

編集2019/03/15 15:34

s8_chu

総合スコア14731

chaso0start

2019/03/15 15:39

解決致しました。早々に有難うございました。

行動規範の内容に同意します

確認してないコード、要点だけで申し訳ないですが

html
1<div class="voice_item">
2  <div class="voice_body">
3    <div class="voice_item_top">
4      <img src="img/home/btn_4.png" alt="">
5      <p>週一トレーニング</p>
6    </div>
7    <div class="voice_item_txt">
8      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
9      </p>
10    </div>
11  </div>
12</div>

scss
1.voice {
2  &_body {
3    background-color: #fff;
4    height: calc(100% - 20px);
5    margin-top: 10px;
6    margin-bottom: 10px;
7  }
8  &_item {
9    background-color: #CCCC99;
10    &_top {
11      background-color: #CCCC99;
12    }
13    &_text {
14    }
15  }
16}