css - 使用Flexbox无法自动调整图像高度

我正在尝试使用CSS Flexbox实现以下解决方案：



我在https://plnkr.co/edit/TbJIdOrJLtDfczno4Kpu?p=preview创建了一个Plunkr，它显示了我当前拥有的东西。


grid row具有固定的高度（Plunkr中的类网格行）
red container应该自动调整高度（Plunkr中的文章）
header和footer具有固定的高度（Plunkr中的页眉和页脚）
该图像应自动适应剩余空间，并设置为背景图像（Plunkr中的图片）


无论我尝试什么，该图像都会自动适应网格行的高度。有人看到我在做什么错吗？

我的HTML

<div class="grid-row">

  <article>

    <header>
      Header text
    </header>

    <picture class="image">

    </picture>

    <footer>
      footer text
    </footer>

  </article>

</div>

我的CSS

.grid-row {
  background: orange;
  height: 200px;
}

.image {
  background-image: url('http://lorempixel.com/400/200/sports/5/');
  background-size: cover;
  flex: auto;
}

article {
  display: flex;
  flex-direction: column;
}

最佳答案

问题是您没有在结构中向上/向下扩展flexbox样式。

.grid-row {
  background: orange;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.image {
  background-image: url('http://lorempixel.com/400/200/sports/5/');
  background-size: cover;
  flex: 1; /* remaining height of article */
}
article {
  display: flex;
  flex-direction: column;
  flex: 1; /* 100% height of row */
}
header {
  background: red;
}
footer {
  background: green;
}

<div class="grid-row">

  <article>

    <header>
      Header text
    </header>

    <div class="image"></div>

    <footer>
      footer text
    </footer>

  </article>

</div>