flexで横並びにした要素の高さを揃えたい

初学者です。dispalay:flexで横に並べた要素の高さを揃えたいです。
window幅は768px以上で、レスポンシブ対応でお願いします。

html
1
2<!-- /.contents -->
3
4
5<section class="contents">
6  <article class="alternate-layout">
7      <div class="contents-wrapper">
8      <h2 class="section-title">展望台</h2>
9      <p class="contents-text">
10      三途の河や針の山の景色が、
11      丁度覗のぞき眼鏡めがねを
12      見るように、はっきりと
13      見えるのでございます。
14      御釈迦様は地獄の容子を
15      御覧になりながら、このかんだたには
16      蜘蛛>を助けた事があるのを
17      御思い出しになりました
18      </p>
19      </div><!-- /.contents-wrapper -->
20
21      <div class="contents-img">
22      <img src="./assets/images/onsen01.jpg" alt="展望台">
23      </div>
24  </article>
25  <article class="alternate-layout alternate-layout--reverse">
26    <div class="contents-wrapper">
27      <h2 class="section-title">温泉</h2>
28      <p class="contents-text">
29      三途の河や針の山の景色が、
30      丁度覗のぞき眼鏡めがねを
31      見るように、はっきりと
32      見えるのでございます。
33      御釈迦様は地獄の容子を
34      御覧になりながら、このかんだたには
35      蜘蛛>を助けた事があるのを
36      御思い出しになりました
37      </p>
38    </div><!-- /.contents-wrapper -->
39
40    <div class="contents-img">
41      <img src="./assets/images/onsen02.jpg" alt="温泉">
42    </div>
43  </article>
44</section>
45
46<!-- /.contents -->
47

scss
1/*-------------------------------------------------
2
3** contents
4---------------------------------------------------*/
5.contents {
6  margin-top: 200px;
7  .alternate-layout {
8    position: relative;
9    overflow: hidden;
10    .contents-wrapper {
11      position: absolute;
12      top: -100%;
13      left: 0;
14      z-index: 2;
15      width: 100%;
16      height: 100%;
17      background: rgba(0, 0, 0, 0.6);
18      -webkit-transition: 0.3s;
19      transition: 0.3s;
20      opacity: 1;
21      padding: 2em;
22      text-align: center;
23      font-size: 0.75em;
24      .section-title {
25        letter-spacing: 0.1em;
26      }
27      .contents-img {
28        width: 100vw;
29        img {
30          width: 100%;
31        }
32      }
33    }
34    &:hover .contents-wrapper {
35      top: 0;
36      left: 0;
37    }
38  }
39}
40
41@media screen and (min-width: 768px) {
42  .contents {
43    .alternate-layout {
44      position: static;
45      display: flex;
46      align-items: center;
47      .contents-wrapper {
48        position: static;
49        // top: 0;
50        // left: 0;
51        // z-index: 0;
52        // width: 100%;
53        // height: 100%;
54        background-image: url(../images/nav-01.png);
55        background-size: cover;
56        background-position: center;
57        flex-wrap: wrap;
58        flex: 1;
59        -webkit-transition: 0.3s;
60        transition: 0.3s;
61        // opacity: 1;
62        padding: 0;
63        text-align: center;
64        font-size: 0.75em;
65        .section-title {
66          letter-spacing: 0.1em;
67        }
68      }
69      .contents-img {
70        width: 60vw;
71        img {
72          max-width: 100%;
73        }
74      }
75      &:hover .contents-wrapper {
76        top: 0;
77        left: 0;
78      }
79    }
80  }
81}
82

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

回答1件

ベストアンサー

細かいレイアウトをどうしたいのか不明なので、
とりあえず高さを揃えるには、下記の二ヶ所を修正すればいいでしょう。

scss
1@media screen and (min-width: 768px) {
2  .contents {
3    .alternate-layout {
4      position: static;
5      display: flex;
6      align-items: stretch;  /* 修正 */
7      .contents-wrapper {
8        position: static;
9        // top: 0;
10        // left: 0;
11        // z-index: 0;
12        // width: 100%;
13        height: auto; /* 修正 */
14        background-image: url(../images/nav-01.png);
15        background-size: cover;
16        background-position: center;
17        flex-wrap: wrap;
18        flex: 1;
19        -webkit-transition: 0.3s;
20        transition: 0.3s;
21        // opacity: 1;
22        padding: 0;
23        text-align: center;
24        font-size: 0.75em;
25        .section-title {
26          letter-spacing: 0.1em;
27        }
28      }
29      .contents-img {
30        width: 60vw;
31        img {
32          max-width: 100%;
33        }
34      }
35      &:hover .contents-wrapper {
36        top: 0;
37        left: 0;
38      }
39    }
40  }
41}