残高を埋めるためにdivを設定する

Question

カードビューを作成しています。ここに示されているのは、非常に減少した形です。
.main divを自動的に展開して、ホバー上の残りの垂直スペースを埋めることができません。

私がStackOverflowで見つけた1つの方法は、絶対配置を使用することです。私はそれほど批判的ではありませんが、記述のフォントサイズを変更する必要がある場合は、bottomも変更する必要があります。そうでなければ重複があります。

これを行うには回避策または高さ（この場合は）のCSSプロパティがありますか？
.foot divの高さを必要としないものはありますか？

div.wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 240px; 
 
    height: 200px; 
 
    color: #171812; 
 
    background: #a0a0a0; 
 
    border-radius: 5px; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:hover { 
 
    height: 250px; 
 
} 
 

 
.head { 
 
    width: 100%; 
 
    padding: 10px 20px; 
 
} 
 

 
.main { 
 
    height: 100px;  /*<<<< HERE*/ 
 
    background: #f00; /*for development purpose*/ 
 
} 
 

 
img { 
 
    height: 100%; 
 
    display: block; 
 
    margin: 10px auto; 
 
} 
 

 
.foot { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    padding: 10px 20px; 
 
}

<div class="wrapper"> 
 
    <div class="head">Name</div> 
 
    <div class="main"> 
 
    <img src="http://i.imgur.com/w5U482j.jpg" /> 
 
    </div> 
 
    <div class="foot"> 
 
    Description 
 
    </div> 
 
</div>

Answer 1

あなたは、flexでそれを行うflex-growプロパティに注意を払うことができます。また、あなたはここでposition: absoluteを使用する必要はありません。

body { 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 240px; 
 
    height: 200px; 
 
    color: #171812; 
 
    background: #a0a0a0; 
 
    border-radius: 5px; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:hover { 
 
    height: 250px; 
 
} 
 

 
.head { 
 
    padding: 10px 20px; 
 
} 
 

 
.main { 
 
    flex-grow: 1; 
 
    height: 100px; 
 
    background: #f00; 
 
} 
 

 
img { 
 
    height: calc(100% - 20px); 
 
    display: block; 
 
    margin: 10px auto; 
 
} 
 

 
.foot { 
 
    padding: 10px 20px; 
 
}

<div class="wrapper"> 
 
    <div class="head">Name</div> 
 
    <div class="main"> 
 
     <img src="http://i.imgur.com/w5U482j.jpg"/> 
 
    </div> 
 
    <div class="foot">Description</div> 
 
</div>

JSFiddle