kullanma FlexBox figcaption

Question

ana hedefi yapmaktır figcaptions' biz içeriğinin tam boyutunu bilmiyoruz gibi içerik maksimum adaptif. Figürün başlığı her zaman gösterilir, biz de imlendiğimizde, tüm boyuttaki içeriği ile birlikte gösterilir. Neden flexbox? Unhovered şekil, metin açıklamasını 0'a sıkıştırır. Vurgulu flexbox büyüyecek mi? Mümkün olduğunu biliyorum ama bunu yapmak için bir şey özlüyorum. Benim hatamın herhangi bir fikri var mı?

* { 
 
\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>