図のfigcaptionにflexboxを使用する

Question

主な目標は、figcaptionsのコンテンツをそのコンテンツの正確なサイズがわからないので最大限に適応させることです。 figcaptionを全体の大きさの内容で表示すると、Figureのタイトルが常に表示されます。フレックスボックスはなぜですか？解説されていない人物は、テキストの説明を0に絞っています。ホバーフレックスボックスが成長するのですか？私はそれが可能であることを知っているが、私はそれを作るために何かが恋しい。私の間違いのアイデア？

* { 
 
\t box-sizing: border-box; 
 
} 
 
body { 
 
\t font-family: "Open Sans", sans-serif; \t 
 
} 
 
.wrapper { 
 
\t text-align: center; 
 
} 
 
img{ 
 
\t vertical-align: middle; 
 
} 
 
figure { 
 
\t display: inline-block; 
 
\t margin: 50px auto; 
 
\t border: 1px solid #333; 
 
\t position: relative; 
 
} 
 
figcaption { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t justify-content: flex-end; \t 
 
\t align-content: flex-end; 
 
\t text-align: left; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t color: #fff; 
 
} 
 
.news-title { 
 
\t border: 1px solid green; 
 
\t transition: 300ms; 
 
} 
 
h3 { 
 
\t font-size: 18px; 
 
\t font-weight: 600; 
 
\t padding: 10px; 
 
\t background: rgba(0,0,0,.3); 
 
    margin: 0; 
 
} 
 
span { 
 
\t flex: 0; 
 
\t overflow: hidden; 
 
\t border: 1px solid red; 
 
\t transition: 300ms; 
 
\t background: rgba(0,0,0,.3); 
 
} 
 
figure:hover span { 
 
\t flex: 1; 
 
\t transition: 500ms; 
 
}

<div class="wrapper"> 
 
\t <figure> 
 
\t \t <img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" /> 
 
\t \t <figcaption> 
 
\t \t \t <div class="news-title"> 
 
\t \t \t \t <h3>Lorem ipsum dolor</h3> 
 
\t \t \t </div> 
 
\t \t \t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span> 
 
\t \t </figcaption> 
 
\t </figure> 
 
</div>

Answer 1

<style> 
       * { 
box-sizing: border-box; 
} 
body { 
font-family: "Open Sans", sans-serif; 
} 
.wrapper { 
text-align: center; 
} 
img{ 
vertical-align: middle; 
} 
figure { 
display: inline-block; 
margin: 50px auto; 
border: 1px solid #333; 
position: relative; 
    } 
figcaption { 
display: block; 
text-align: left; 
position: absolute; 
bottom: 0; 
left: 0; 
    width: 100%; 
color: #fff; 
    } 
.news-title { 
border: 1px solid green; 
/*transition: 300ms;*/ 
    } 
    h3 { 
font-size: 18px; 
font-weight: 600; 
padding: 10px; 
background: rgba(0,0,0,.3); 
margin: 0; 
    } 
    span { 
    display: none; 
    width:100%; 
overflow: hidden; 
border: 1px solid red; 
/*transition: 300ms;*/ 
background: rgba(0,0,0,.3); 
    } 
    /*figure:hover span { 

transition: 500ms; 
    }*/ 
      </style> 




    <div class="wrapper"> 
     <figure> 
      <img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" /> 
      <figcaption> 
       <div class="news-title"> 
        <h3>Lorem ipsum dolor</h3> 
       </div> 
       <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span> 
      </figcaption> 
     </figure> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>--> 
     <script> 
      $(document).ready(function() { 
       $("figure").hover(function() { 
        $("span").slideToggle(); 

       }) 

      }); 
     </script>