Verwendung von Flexbox für Figuren 'figcaption

Question

Das Hauptziel ist es, den Inhalt von figcaptions maximal adaptiv zu machen, da wir die genaue Größe seines Inhalts nicht kennen. Titel der Figur wird immer angezeigt, wenn wir schweben, erscheint die figcaption mit ihrem ganzen Inhalt. Warum Flexbox? Nicht aufgefädelte Figur quetscht Textbeschreibung auf 0. Wenn Hover Flexbox wachsen soll? Ich weiß, dass es möglich ist, aber ich vermisse etwas, um es zu schaffen. Irgendwelche Ideen von meinem Fehler?

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