Css 如何使单个DIV填充父DIV中剩余的垂直空间

我有一个填充视口的div（宽度为100%，高度为100vh）

div内有一个横幅图像（宽度为100%，高度未设置，因此它会自动调整大小以适应宽度）和另一个div

我希望内部div填充垂直空间的其余部分。宽度容易；我刚刚将宽度设置为100%。但我希望div也可以拉伸，以填充剩余垂直空间的100%

据我所知，flexbox似乎可以做到这一点……但我一直无法让它发挥作用

---

帮助？

精简的HTML将如下所示：

<div id="flex-container">
  <img src="banner.png" />
  <div id="flex-item">Text or whatever</div>
</div>

---

仅供参考，它在测试环境中工作得很好，但当我将其应用到我的工作设计中时，它仍然没有垂直拉伸。原来绊倒我的是我的。flex itemdiv是位置：绝对。将其更改为位置：relative不会对设计产生任何不利影响，因此问题得以解决。

您说您有一个适合视口的div，其中是一个图像。但是你想要“内部div”。什么内部分区？你的意思是图像下方的div和外部div的内部吗？欢迎来到SO@jbwtucker，你能提供你的HTML吗？也许使用JSFIDLE作为一个工作示例？解决了我自己的问题。谢谢，@ewitkows……我总是能够解决我自己的问题，通常是躲在这里。我想我崩溃了，问得有点太早了。使用-echoplex.net解决此问题。

.flex-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
}
.flex-item {
  position: relative;
  width: 100%;
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}