Flexbox无法正常工作时自动调整图像高度

Question

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

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

• grid row具有固定的高度（Plunkr中的类网格行）
• red container应该自动调整高度（Plunkr中的文章）
• header和footer有一个固定的高度（Plunkr中的页眉和页脚）
• 图像应自动显示剩余空间并设置为背景图像（Picture in 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样式。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="grid-row">

  <article>

    <header>
      Header text
    </header>

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

    <footer>
      footer text
    </footer>

  </article>

</div>

＆＃13;

＆＃13;

＆＃13;