html - 设置 div 高度以填充剩余高度

Question

我正在制作卡片 View 。这里显示的是一个极度简化的形式。
我无法让 .main div 在悬停时自动扩展以填充剩余的垂直空间。

我在 StackOverflow 上找到的一种方法是使用绝对定位。我对它不是很挑剔，但是当我需要更改时，比如说，描述的字体大小，我也必须更改 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属性(property)。此外，您不需要使用 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