html - object-fit 在 flexbox 容器中不起作用

Question

我有img一个article. article高度与body减去顶部相同（nav当然是可变的）。我发现object-fit工作的唯一方法是在 中放置一个固定的高度article，这没有意义，因为它的高度是动态的。

我究竟做错了什么？

body {
  margin:0;
  height:100vh;
  display:flex;
  flex-direction:column;
}
#navTop {
  background:lightgreen;
}
main {
  background:gray;
  padding:0.5em;
  display:flex;
  flex:1;
  align-items:stretch;
}
#navLeft {
  background:beige;
  min-width:25vw;
  max-width:25vw;
}
article {
  background:#ffdd80;
  flex:1;
  /*height:90vh;  /*uncomment that line to see it working*/
}
article img {
  height:100%;
  object-fit:scale-down;
}

<nav id='navTop'>Title</nav>
<main>
  <nav id='navLeft'>
    Menu
  </nav>
  <article>
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/White-beardedHermit.jpg' />
  </article>
</main>