Divが親要素のパディング内に表示されます。

Question

3列のフレックスボックスレイアウトを作成しました。最初に3つのフレックスボックスレイアウトが作成され、最初にキャプションが付いたイメージが表示されます。何らかの理由で、このキャプション（.photo-caption）は、その下にではなく、親要素の（.card-cont）パディング内に表示されます。このキャプションのスタイルを、期待通りにプッシュダウンするにはどうすればよいですか？

レイアウトサンプル：

<div class="card-cont"> 
    <h2>Symphonic masters 1 Subscription</h2> 
    <div class="card"> 
    <div class="card-img"> 
     <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a> 
     <div class="photo-caption"> 
     Photo by Humberto Howard 
     </div> 
    </div> 
    <div class="card-info"> 
     <p> 
     Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
     </p> 
    </div> 
    <div class="card-links"> 
     <div class="button-cont"> 
     <a class="button blue-button" href="#">Subscribe</a> 
     </div> 
    </div> 
    </div> 
</div> 

サンプルCSS：

section.events-wide .card-cont { 
    padding: 30px 0; 
} 
section.events-wide .card-cont > h2 { 
    padding-bottom: 15px; 
    font-size: 1.75em; 
} 
section.events-wide .card-cont .card { 
    display: flex; 
    height: 295px; 
    background-color: grey; 
} 
section.events-wide .card-cont .card .card-buy-button, 
section.events-wide .card-cont .card .card-img, 
section.events-wide .card-cont .card .card-info, 
section.events-wide .card-cont .card .card-learn-more, 
section.events-wide .card-cont .card .card-links { 
    flex-basis: 33.3%; 
} 
section.events-wide .card-cont .card .card-img a { 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
} 
section.events-wide .card-cont .card .card-img a img { 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
} 
section.events-wide .card-cont .card .card-info, 
section.events-wide .card-cont .card .card-learn-more, 
section.events-wide .card-cont .card .card-links { 
    padding: 30px 2%; 
} 
section.events-wide .card-cont .card .card-info p a, 
section.events-wide .card-cont .card .card-learn-more p a, 
section.events-wide .card-cont .card .card-links p a { 
    font-size: 1.1em; 
} 
section.events-wide .card-cont .card .card-info { 
    text-align: left; 
} 
section.events-wide .card-cont .card .card-info h1, 
section.events-wide .card-cont .card .card-info h2 { 
    display: block; 
    flex-flow: row nowrap; 
    padding: 5px 0; 
    line-height: 1.2; 
} 
section.events-wide .card-cont .card .card-info h1 { 
    font-size: 1.5em; 
} 
section.events-wide .card-cont .card .card-info h2 { 
    font-size: 1.1em; 
} 
section.events-wide .card-cont .card .card-buy-button .button-cont, 
section.events-wide .card-cont .card .card-links .button-cont { 
    padding-bottom: 30px; 
} 
section.events-wide .card-cont .card .card-buy-button .button-cont .button, 
section.events-wide .card-cont .card .card-links .button-cont .button { 
    display: inline-block; 
    padding: 10px 60px; 
    font-size: 1.2em; 
} 

の作業のデモ：http://codepen.io/ourcore/pen/jyBbEv。

Answer 1

これらの要素がDOMに自然に流れ込まないようにハード高さを定義しました。 section.events-wide .card-cont .cardとsection.events-wide .card-cont .card .card-img aから高さを削除すると、コンテンツが親要素のパディングにオーバーフローしない自然な高さになります。私が見

section.events-wide header { 
 
    padding: 15px 0; 
 
} 
 
section.events-wide header h1 { 
 
    font-size: 2.5em; 
 
    line-height: 1; 
 
} 
 
section.events-wide .card-cont { 
 
    padding: 30px 0; 
 
} 
 
section.events-wide .card-cont > h2 { 
 
    padding-bottom: 15px; 
 
    font-size: 1.75em; 
 
} 
 
section.events-wide .card-cont .card { 
 
    display: flex; 
 
/* height: 295px; */ 
 
    background-color: grey; 
 
} 
 
section.events-wide .card-cont .card .card-buy-button, 
 
section.events-wide .card-cont .card .card-img, 
 
section.events-wide .card-cont .card .card-info, 
 
section.events-wide .card-cont .card .card-learn-more, 
 
section.events-wide .card-cont .card .card-links { 
 
    flex-basis: 33.3%; 
 
} 
 
section.events-wide .card-cont .card .card-img a { 
 
    display: inline-block; 
 
/* height: 100%; */ 
 
    width: 100%; 
 
} 
 
section.events-wide .card-cont .card .card-img a img { 
 
    object-fit: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
section.events-wide .card-cont .card .card-info, 
 
section.events-wide .card-cont .card .card-learn-more, 
 
section.events-wide .card-cont .card .card-links { 
 
    padding: 30px 2%; 
 
} 
 
section.events-wide .card-cont .card .card-info p a, 
 
section.events-wide .card-cont .card .card-learn-more p a, 
 
section.events-wide .card-cont .card .card-links p a { 
 
    font-size: 1.1em; 
 
} 
 
section.events-wide .card-cont .card .card-info { 
 
    text-align: left; 
 
} 
 
section.events-wide .card-cont .card .card-info h1, 
 
section.events-wide .card-cont .card .card-info h2 { 
 
    display: block; 
 
    flex-flow: row nowrap; 
 
    padding: 5px 0; 
 
    line-height: 1.2; 
 
} 
 
section.events-wide .card-cont .card .card-info h1 { 
 
    font-size: 1.5em; 
 
} 
 
section.events-wide .card-cont .card .card-info h2 { 
 
    font-size: 1.1em; 
 
} 
 
section.events-wide .card-cont .card .card-buy-button .button-cont, 
 
section.events-wide .card-cont .card .card-links .button-cont { 
 
    padding-bottom: 30px; 
 
} 
 
section.events-wide .card-cont .card .card-buy-button .button-cont .button, 
 
section.events-wide .card-cont .card .card-links .button-cont .button { 
 
    display: inline-block; 
 
    padding: 10px 60px; 
 
    font-size: 1.2em; 
 
} 
 

 
.events-wide.events-wide-alt .card-cont:not(:last-child) { 
 
    border-bottom: 1px solid grey; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card { 
 
    background-color: transparent; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card > div { 
 
    padding: 0; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card > div:not(:last-child) { 
 
    padding-right: 2%; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card > div .photo-caption { 
 
    display: block; 
 
    height: 15px; 
 
    font-size: .65em; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card > div p { 
 
    font-size: 1.1em; 
 
} 
 
.events-wide.events-wide-alt .card-cont .card > div .button { 
 
    width: 100%; 
 
}

<!-- Events START --> 
 
<section class="events-wide events-wide-alt"> 
 
    <div id="events-cont"> 
 
    <div class="card-cont"> 
 
     <h2>Symphonic masters 1 Subscription</h2> 
 
     <div class="card"> 
 
     <div class="card-img"> 
 
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a> 
 
      <div class="photo-caption"> 
 
      Photo by Humberto Howard 
 
      </div> 
 
     </div> 
 
     <div class="card-info"> 
 
      <p> 
 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
      </p> 
 
     </div> 
 
     <div class="card-links"> 
 
      <div class="button-cont"> 
 
      <a class="button blue-button" href="#">Subscribe</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-cont"> 
 
     <h2>Symphonic masters 1 Subscription</h2> 
 
     <div class="card"> 
 
     <div class="card-img"> 
 
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a> 
 
      <div class="photo-caption"> 
 
      Photo by Humberto Howard 
 
      </div> 
 
     </div> 
 
     <div class="card-info"> 
 
      <p> 
 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
      </p> 
 
     </div> 
 
     <div class="card-links"> 
 
      <div class="button-cont"> 
 
      <a class="button blue-button" href="#">Subscribe</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-cont"> 
 
     <h2>Symphonic masters 1 Subscription</h2> 
 
     <div class="card"> 
 
     <div class="card-img"> 
 
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a> 
 
      <div class="photo-caption"> 
 
      Photo by Humberto Howard 
 
      </div> 
 
     </div> 
 
     <div class="card-info"> 
 
      <p> 
 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
      </p> 
 
     </div> 
 
     <div class="card-links"> 
 
      <div class="button-cont"> 
 
      <a class="button blue-button" href="#">Subscribe</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</section>