Использование flexbox для рисунка figcaption

Question

Основная цель - сделать контент figcaptions максимально адаптивным, поскольку мы не знаем точного размера его содержимого. Название фигуры всегда отображается, когда мы наводим figcaption, появляется весь его контент. Почему flexbox? Необращенная фигура сжимает текстовое описание до 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>