子要素に左右されず親要素の幅を揃えたい

Question

お世話になっております。
模写コーディング中なのですが下記画像のように文章の量で親要素が伸びてしまいます。
自分でも調べてみたのですが分からず、教えていただけると幸いです。

↓模写サイト
https://prog-8.com/

      <div class="item-container">
        <h2>サクセスストーリー</h2>
        <p class="sub-lead">プログラミングの世界への第一歩を踏み出し、夢を実現した方々のサクセスストーリーを紹介します。</p>
        <div class="success-container">

          <div class="item">
            <img src="img/1570587077399.png" alt="">
            <h3 class="lead">「プログラミングで人生180度変わった。」小学生がJavaScriptでゲーム開発するようになるまで</h3>
            <p class="name">村馬弘一</p>
            <p class="from">japan</p>
          </div>
          

          <div class="item">
            <img src="img/1560417815612.jpg" alt="">
            <h3 class="lead">「教育現場にエンジニア経験を還元したい！」元小学校教員エンジニアが叶えたい夢とは</h3>
            <p class="name">三浦卓馬</p>
            <p class="from">japan</p>
          </div>

          <div class="item">
            <img src="img/1561420948224.jpg" alt="">
            <h3 class="lead">「プログラミングはもうやりたくなかったけど必要に迫られて」mikanグロースハッカーの超実践SQL活用法</h3>
            <p class="name">飯田 諒</p>
            <p class="from">japan</p>
          </div>

          <div class="item">
            <img src="img/1565058933263.png" alt="">
            <h3 class="lead">「私、プログラミングできるかも。」アプリ版Progateから２ヶ月で、アイドルからエンジニアに転職した話</h3>
            <p class="name">五十嵐 夏菜</p>
            <p class="from">japan</p>
          </div>

          <div class="item">
            <img src="img/1566914605258.png" alt="">
            <h3 class="lead">「起業準備はProgateしかしてません」 YOUTRUST代表岩崎由夏のプログラミング勉強法</h3>
            <p class="name">岩崎 由夏</p>
            <p class="from">japan</p>
          </div>

          <div class="item">
            <img src="img/1570587077399.png" alt="">
            <h3 class="lead">「夢みていたところで働けるのは幸せです」プログラミング未経験者が憧れのBASEで働くまで</h3>
            <p class="name">三佐和 千鶴</p>
            <p class="from">japan</p>
          </div>

        </div>
        
      </div>



ここからCSS

.item-container{
  background-color: #2b546a;
  color: #F8FBFE;
  text-align: center;
}

.item-container h2{
  font-size: 32px;
  font-weight: 700;
  line-height: 55px;
  padding: 100px 0 20px 0;
}

.item-container .sub-lead{
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
  padding: 0 0 60px 0;
}

.success-container{
  padding: 0 220px;
  display: flex;
  flex-wrap: wrap;
}

.success-container .item{
  max-width: 310px;
  height:100%;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 40px 24px;
  box-sizing: border-box;
  margin-bottom:30px;
  display: flex;
  flex-direction: column;
	align-items: center;
}

.success-container .item:nth-of-type(2){
  margin: 0 30px;
}

.success-container .item:nth-of-type(5){
  margin: 0 30px;
}

.item img{
  width: 100px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 40px;
}

.item .lead{
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color:#2b546a;
}

.item .name{
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  color:#bac6d3;
  padding:50px 0 5px 0;
}

.item .from{
  font-size: 12px;
  font-weight: 700;
  line-height: 21px;
  color:#bac6d3;
}

汚いコードで申し訳ないです。。。
よろしくお願いいたします！

Answer 1

提示のコードではFlexレイアウトをつかっていますので、.item の height:100%; を削除すれば各行の高さはそろいます。デフォルトが align-items: stretch; なので。

あと、アイテム間の余白をmargin で設定してますが、コンテナの方で gapプロパティで設定するとシンプルになります。

.success-container{
  padding: 0 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* 追加 アイテム間余白 */
}

.success-container .item{
  max-width: 310px;
/*  height:100%; 削除 */
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 40px 24px;
  box-sizing: border-box;
/*  margin-bottom:30px; 削除 */
  display: flex;
  flex-direction: column;
	align-items: center;
}
/* 削除
.success-container .item:nth-of-type(2){
  margin: 0 30px;
}

.success-container .item:nth-of-type(5){
  margin: 0 30px;
}
*/

---

おまけ

下記のようにをmargin-top: auto;を追加しておくと、名前の位置を揃えることができます。

.item .name{
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  color:#bac6d3;
  padding:50px 0 5px 0;
  margin-top: auto; /* 追加 */
}

Comments

[cae_03]

わかりやすい回答ありがとうございます！！
精進したいと思います。

Answer 2

どうしたいのか期待する結果がよく分かりませんが、.item .lead に高さを指定してください。

.item .lead {
  height: 104px;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: #2b546a;
}

Answer 3

「item」クラスの、高さ設定で制御できます。
サンプルコードに当クラスがなかったので、強制的に下のコードを追加するとわかると思います。

.item { height: 30rem!important; }

↑このクラスの要素の高さを、30文字分サイズに統一する指定です。

ボックスの中の文字数が可変の場合は、最長何文字にするか決めておく必要があります。
この高さの値は全体の何パーセント固定にするなど、随意に決めてください。