css - 使用 flexbox 的图像自动调整高度不起作用

Question

我正在尝试使用 css flexbox 实现以下解决方案:

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

• grid row 有一个固定的高度(Plunkr 中的 grid-row 类)
• 红色容器 应该自动调整高度(Plunkr 中的文章)
• header 和footer 有固定的高度(Plunkr 中的header 和footer)
• 图像应自动适应剩余空间并设置为背景图像(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;
}

Answer 1

问题是您没有通过结构向上/向下扩展 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>