Flexbox内の画像とテキストコンテンツの高さを同じにするには？

Question

いつもお世話になっております。

Flexbox内に画像とテキストを横並びにするように設定をし、
スマホで見ると、画像が縦に伸びてしまうため、[aline-items: flex-start]を入れることで解決しました。
しかし、こうするとテキストのコンテンツ高さが写真よりも小さくなってしまいます。

下記架空ページの「施工事例」「お客様の声」「イベント情報」の部分です。
架空ページ

<div class="content jirei">
          <div class="text-item">
            <a href="#" class="btn">
              <span class="btn-text">
            <div>
            <h3>施工事例</h3>
            <div class="sub-text">
            <p>新築・リノベーション</p>
          </div>
        </div>
          </span>
            </a>
          </div>
          <img src="images/sekou-jirei.jpg">
        </div>

.content {
    display: flex;
    align-items: flex-start;
    border: 1px solid $border-color;
    width: 100%;
    height: auto;
    margin-bottom: 24px;

  .text-item {
    width: 100%;
    // height: 100%;
    background-color: #fff;
    display: flex;
    align-items: flex-start;


    a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: #000;
      
    }

    .btn {
      position: relative;
      height: 100%;
      display: flex;
      background: #fff;
      
    }

    .btn-text {
      width: 100%;
      height: 100%;
      color: #000;
      z-index: 10;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0;
        display: block;
        background: #426256;
        z-index: -1;
        transition: .2s;
      }

      &:hover {
        color: #fff;

        &::before {
          width: 100%;
        }
      }
    }

    .btn2 {
      .btn-text {
        &::before {
          background: #263959;
        }
      }

    }

    h3 {
      @include fontsize(18);
      padding: 25px 0 60px 28px;
    }

    .sub-text {
      @include fontsize(16);
      text-align: center;
      line-height: 1.5;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      margin:0;
      padding:0;
    }
  }

  img {
    width: 50%;
    height: auto;
  }
}

理想はこのように写真の高さと揃えたいです。

Answer 1

解決いたしました。

最初、親要素の.contentにalign-items: flex-start；
にしていたため、子要素全体がflex-startになり、テキスト側がにも反映され
高さが合わなかったのですが、親要素ではなく子要素の方に指定をしたらできました。

子要素
.text-itemにdisplay: flex;　*こうするとデフォルトのalign-self:strechが効く為画像の高さ幅と合う。
.imgにdisplay:flex/align-self: flex-start;

このように指定すると、うまくできました。

Answer 2

もう外側にdivのflexを追加してあげればいいんじゃないでしょうか。

**<div style="flex~">**
<div class="text-item">
            <a href="#" class="btn">
　　　　　　---省略----
          <img src="images/sekou-jirei.jpg">
        </div>
**</div>**

Comments

[yunoco_55]

早速回答ありがとうございます。
教えていただいたように外側にdivを持ってきて、
display:flexにしたみたところ、テキストコンテンツの高さは画像と同じになったのですが、ipadやiphone実機で確認すると画像が縦に伸びてしまいます…

親要素 .content にdisplay: flex;
子要素 .text-itemにdisplay:flex / align-items: center
のようにやるといいという記事は見たのですが、それもうまくいかず…