Html 将flexbox用于图形'；菲卡普顿

主要目标是使figcaptions的内容具有最大的适应性，因为我们不知道其内容的确切大小。图的标题总是显示出来，当我们悬停时，figcaption显示了它的全部内容。为什么是flexbox？未覆盖图将文本描述压缩为0。悬停flexbox何时增长？我知道这是可能的，但我错过了一些东西。你知道我的错误吗

*{
框大小：边框框；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
.包装纸{
文本对齐：居中；
}
img{
垂直对齐：中间对齐；
}
身材{
显示：内联块；
保证金：50px自动；
边框：1px实心#333；
位置：相对位置；
}
菲卡普顿{
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
对齐内容：柔性端；
文本对齐：左对齐；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
颜色：#fff；
}
.新闻标题{
边框：1px纯绿色；
过渡时间：300ms；
}
h3{
字号：18px；
字号：600；
填充：10px；
背景：rgba（0,0,0,3）；
保证金：0；
}
跨度{
弹性：0；
溢出：隐藏；
边框：1px纯红；
过渡时间：300ms；
背景：rgba（0,0,0,3）；
}
图：悬停跨度{
弹性：1；
过渡时间：500ms；
}

同侧阴唇
Lorem ipsum dolor sit amet，奉献精英。最短自然时间！尊严、荣誉、荣誉、荣誉、荣誉？极小值，错误！

* {
框大小：边框框；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
.包装纸{
文本对齐：居中；
}
img{
垂直对齐：中间对齐；
}
身材{
显示：内联块；
保证金：50px自动；
边框：1px实心#333；
位置：相对位置；
}
菲卡普顿{
显示：块；
文本对齐：左对齐；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
颜色：#fff；
}
.新闻标题{
边框：1px纯绿色；
/*过渡时间：300ms*/
}
h3{
字号：18px；
字号：600；
填充：10px；
背景：rgba（0,0,0,3）；
保证金：0；
}
跨度{
显示：无；
宽度：100%；
溢出：隐藏；
边框：1px纯红；
/*过渡时间：300ms*/
背景：rgba（0,0,0,3）；
}
/*图：悬停跨度{
过渡时间：500ms；
}*/
同侧阴唇
Lorem ipsum dolor sit amet，奉献精英。最短自然时间！尊严、荣誉、荣誉、荣誉、荣誉？极小值，错误！
$（文档）.ready（函数（）{
$（“图”）.hover（函数（）{
$（“span”）.slideToggle（）；
})
});

你到底想要什么？你想要它从下到上滚动吗？是的，内容的最大高度。不多不少。像这里：。但是现在它是100%高度。我不认为我想使用jq来实现这一点）没有jquery它不会产生幻灯片效果，你想要吗，所以我给了代码？？重点是使用flexbox能力，没有使用max height hack，因为它有自己的问题，比如在计算高度和过渡时间之前使用freez。。。

 <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>