フレキシブルボックスを使って横並びにした3つのボックスの高さをそろえ、内容物の高さも同じにしたい

Question

display:flex;を使って、3つのボックスの高さをそろえたいと考えています。

具体的には、最終的に

「顔写真」
「連絡先」
すこしの空白をはさんで
「ボタン」

と表示されるようにすることが目的です。

このとき「ボタン」の位置は3つのボックスとも、
同じ高さで横一列にそろえたいです。

仮にHTMLが

HTML
<div class="contents">
    <div class="box">
        <div class="face">顔写真</div>
        <div class="address">
            連絡先 連絡先 連絡先 連絡先
        </div>
        <div class="btn">ボタン</div>
    </div>
    <div class="box">
        <div class="face">顔写真</div>
        <div class="address">
            連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先
        </div>
        <div class="btn">ボタン</div>
    </div>
    <div class="box">
        <div class="face">顔写真</div>
        <div class="address">
            連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先連絡先 連絡先 連絡先 連絡先
        </div>
        <div class="btn">ボタン</div>
    </div>
</div>

の場合は

CSS
.contents {
    display: flex;
}

.box {
    width: 200px;
    display: flex;
    flex-direction: column;
}

.btn {
    margin-top: auto;
}

と書けば、希望通り
3つのboxで「ボタン」が横一列に同じ高さに並びます。

しかしdiv.boxの中に孫要素まで入っている場合が分かりません。
具体的には

HTML
<div class="contents">
    <div class="box">
        <div class="face">顔写真</div>
        <div class="contact">
            <div class="address">
                連絡先 連絡先 連絡先 連絡先 
            </div>
            <div class="btn">ボタン</div>
        </div>
    </div>
    <div class="box">
        <div class="face">顔写真</div>
        <div class="contact">
            <div class="address">
                連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先
            </div>
            <div class="btn">ボタン</div>
        </div>
    </div>
    <div class="box">
        <div class="face">顔写真</div>
        <div class="contact">
            <div class="address">
                連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先 連絡先連絡先 連絡先 連絡先 連絡先
            </div>
            <div class="btn">ボタン</div>
        </div>
    </div>
</div>

という場合、どのように高さをそろえたらよいのでしょうか？

試しに

CSS
.contents {
    display: flex;
}

.box {
    width: 200px;
}

.contact {
    display: flex;
    flex-direction: column;
}

.btn {
    margin-top: auto;
}

と書いてみましたが、まったくボタンの高さがそろわないですし、ほかに

CSS
.contents {
    display: flex;
}

.box {
    width: 200px;
}

.box {
    display: flex;
    flex-direction: column;
}

.contact {
    margin-top: auto;
}

と書くと、

「顔写真」
すこしの空白をはさんで
「連絡先」
「ボタン」

となってしまいました。

よろしくお願いします。

--- 追記 ---

投稿のあと、.contactに高さを明示し、.addressにoverflow:hiddenを使えば
思っていたものに近いものができそうでした。

具体的には

CSS
.contents {
    display: flex;
}

.box {
    width: 200px;
}

.contact {
    display: flex;
    flex-direction: column;
    height: 200px;
}

.address {
    overflow: hidden;
}

.btn {
    margin-top: auto;
}

とする方法です。

しかしこの方法は、わざわざ高さを明示しなければならない点が不満です。
また高さを明示したため、結局コンテンツ量が多くなると高さがそろわないという欠点があります。

そこで.addressにoverflow: hiddenをつけました。
ですがこの方法だとコンテンツが途切れるというのが不細工です。

希望していた形はコンテンツ量の増加にしたがって
３つのボックス（のaddress部分）も同時に広がる、というものでした。

Comments

[m.ts10806]

Flexは本件とは無関係かと思います。
https://teratail.com/tags/Flex

[m.ts10806]

質問は残り続けますので今後の検索のノイズになり得ます。タグを修正してください。
（ご自身の他の質問でも誤用されているようなのであわせてご対応ください）

Answer 1

contactクラスもflexレイアウトにして、justify-content: space-between;でどうですか。

.contents {
    display: flex;
}

.box {
    width: 200px;
    display: flex;
    flex-direction: column;
}

.contact {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Comments

[cheshire-cat]

早い回答ありがとうございます。
できました！
space-betweenは考えませんでした。

前に読んだ本に、margin-top:autoで余白を移動させるやり方が書いてあったので、margin-top:autoでやろうとしていました。

書き方の統一性の観点から、階層が深くなっても同じくmargin-top:autoでやりたいと考えていたのですが、ともかくこれで当面のピンチは凌げそうです。

ありがとうございました。