文字数に関係なく、横並び要素の高さを揃えたい

前提・実現したいこと

横並び要素の高さを揃えたいのですが、高さが揃いません。
親要素に「display: flex;」を指定することで、子要素の高さは自動的に揃うと認識していますが、カード下部にあるテキスト部分の文字数が違うため、各要素の高さにズレが生じています。

文字数が異なる場合でも、高さが自動で揃うようにしたいと考えています。

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

services__cardsクラスに「display:flex;」を指定することで、
card__bodyクラスの子要素については高さが揃っています。
しかし、その子要素であるcard__descriptionクラスの要素について高さが揃わないため、
文字数が異なる場合、要素の高さが異なってしまいます。

該当のソースコード

★html

<body> <section class="section services"> <h2 class="section__title" id="services">SERVICEs</h2> <div class="services__inner"> <ul class="services__cards"> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 </div> </li> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> </div> </li> <li class="services__card card wow fadeIn"> <div class="card__head"> <img src="https://placehold.jp/300x200.png" alt=""> </div> <div class="card__body"> <div class="card__title">タイトル</div> <div class="card__description">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> </div> </li> </ul> </div> </section> </body>

★css
@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
}

body {
font-size: 10px;
font-size: 0.625rem;
letter-spacing: .5em;
color: #333333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Serif JP", sans-serif;
background-color: #ECECEC;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
border: 0;
margin: 0;
padding: 0;
}

img {
width: 100%;
vertical-align: bottom;
}

ul, li {
list-style-type: none;
}

.section {
margin-bottom: 60px;
}

.section__title {
font-size: 36px;
font-size: 2.25rem;
text-align: center;
margin-bottom: 60px;
position: relative;
}

.section__inner {
margin: 0 auto;
padding: 0 4vw;
}

.services__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}

.services__cards {
display: block;
}

@media (min-width: 768px) {
.services__cards {
display: flex;
}
}

.services__card {
width: 100%;
}

@media (min-width: 768px) {
.services__card {
width: calc(100%/3 - 20px*2/3);
}
}

.services__card + .services__card {
margin: 40px 0 0 0;
}

@media (min-width: 768px) {
.services__card + .services__card {
margin: 0 0 0 20px;
}
}

.card__body {
background-color: rgba(255, 255, 255, 0.5);
padding: 15px;
}

.card__description {
margin-top: 10px;
}

試したこと

Google Chromeのデベロッパーツールで確認したところ、
card__bodyクラスの要素について高さは揃っているようなので、
card__descriptionクラスの要素部分に係るCSS指定に問題があるかと思います。

インターネットで検索したところ、
上記部分で「flex-grow: 1;」を指定するという解決策を発見しましたが、
この方法では改善しませんでした。

補足情報（FW/ツールのバージョンなど）

作業環境はVSCODEです。
閲覧環境はGoogle Chromeになります。

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

回答2件

ベストアンサー

提示のコードで divの閉じタグ不足や、CSSセレクターがHTMLと合致していない部分がありますので、それを修正すれば servicescardクラスの高さは揃います。

ただしcardbodyクラスの高さまでは揃いません。flexが影響するのは子要素(servicescard)であって、孫要素(cardbody)までは影響しませんので。

背景色を.cardbodyクラスに設定するのではなく.servicescardに設定すればservicescardクラスの高さが揃っているのが確認できます。

CodePenサンプル

cardbodyクラスの高さも揃えたい(親要素の高さ一杯にする)のなら、下記のようなCSSを設定すればいいでしょう。

css
1.servicescard {
2  display: flex;
3  flex-direction: column;
4}
5.cardbody {
6  padding: 15px;
7  background-color: lightcyan; /* 確認のための背景色 */
8  flex-grow: 1;
9}

投稿2021/01/10 03:22

編集2021/01/10 03:46

hatena19

総合スコア34075

zao8383

2021/01/10 07:25

ご回答いただきありがとうございます。孫要素までflexが影響しないということで、子要素の背景色にcssを設定したところ、希望通りの表示となりました。とても助かりました。

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

flex-growだけでなくflex-basicも設定する必要があります。

`display:flex'の子要素のことを「Flexアイテム」と呼びます。

Flexアイテムにはflexというプロパティを設定出来ます。
このflexとはflex-grow,flex-shrink,flex-basicの３つのプロパティをセットで設定するショートハンドと呼ばれるプロパティです。（backgroundと同じ）

このflexプロパティの初期値（何も書かない場合に自動的に設定される値）が,flex: 0 1 auto;となっています。
このためflex-grow:1;だけを設定してもflex-basic:auto;になってしまっているので、Flexアイテムの中の要素に応じて幅が決まってしまいます。

ですので、flex-basicにauto以外の値を入れて、すべてのFlexアイテムの幅を設定してあげることで幅を揃えることができるようになります。

■上記コードによる実装例（一つdivの閉じタグがありませんでしたので、補完しています）
https://codepen.io/mattari-panda/pen/bGwjPGm

■Flexアイテムに関する参考サイト（私ではない方が書かれた記事です）
https://parashuto.com/rriver/development/how-flex-item-width-is-calculated

flex関連の理解はかなり難しいですが、がんばってみてください。

投稿2021/01/10 02:29