Html 容器中没有指定高度的嵌套flex元素

我有一个情况，我需要一个图像来扩展到它的容器的大小，它是一个灵活的盒子，不能有一个固定的高度

直接容器嵌套在几层FlexBox中，外层的高度需要为80vh

我看到，当容器的高度和宽度设置为百分比时，图像不会垂直调整大小。有没有人能解决这个问题？我需要一个一致的解决方案，几个图像具有广泛的纵横比（一些肖像，一些景观）

谢谢

有关代码和代码笔链接，请参见下文：

这是一个固定的
这需要扩展以适应其内容的能力，这是可变的。
这就是细节所在
.包装纸{
显示器：flex；
高度：80vh；
}
.购买详情{
宽度：350px；
填充：10px；
边框：1px纯黑；
}
.imperial图像包裹{
宽度：计算（100%-350px）；
高度：80vh；
}
.帝国形象卡{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.图像图标容器{
flex:2-1自动；
显示器：flex；
}
.动作图标{
边框：1px纯紫色；
显示器：flex；
证明内容：中心；
最小高度：15px；
}
.资产说明{
宽度：100%；
边框：1px纯红；
}
.上一页，.下一页{
最小宽度：15px；
边框：1px纯红；
}
身材{
显示器：flex；
弯曲方向：行；
宽度：100%；
身高：100%；
}
img{
最大高度：100%；
最大宽度：100%；
保证金：自动；
}

从我在您的代码笔中看到的情况来看，问题在于图像超出了div的范围

我已将数字更改为最大高度：100%，而不是高度：100%

现在看起来不错：

---

大概谢谢该kiiind可用于chrome/firefox，但由于某些原因，当窗口在某一点后垂直调整大小时，图像仍然不包含在包装器中。在safari中，它根本不垂直调整大小。

<div class="wrapper">
  <div class="imperial-image-wrap">
    <section class="imperial-image-card">
      <div class="image-icon-container">
        <div class="previous">
        </div>
        <figure>
          <img src="http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg" />
        </figure>
        <div class="next">
        </div>
      </div>
      <section class="action-icons">
        <span>This is a fixed with</span>
      </section>
      <div class="asset-description">
        <div class="asset-title">
          <span>This needs the ability to expand to fit it's content, which is variable.</span>
        </div>  
      </div>
    </section>
  </div>
  <div class="buy-details">
    <span>This is where the details go</span>
  </div>
</div>

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:2 1 auto;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
  min-height: 15px;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 15px;
  border: 1px solid red;
}
figure {
  display:flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
img {
  max-height:100%;
  max-width:100%;
  margin: auto;
}

.wrapper {
  display:flex;
  height: 80vh;
}
.buy-details {
  width: 350px;
  padding: 10px;
  border: 1px solid black;
}
.imperial-image-wrap {
  width:calc(100%-350px);
  height:80vh;
}
.imperial-image-card {
  height:100%;
  display:flex;
  flex-direction: column;
}
.image-icon-container {
  flex:1;
  display:flex;
}
.action-icons {
  border: 1px solid purple;
  display:flex;
  justify-content:center;
}
.asset-description {
  width: 100%;
  border: 1px solid red;
}
.previous, .next {
  min-width: 45px;
  border: 1px solid red;
}
figure {
  display:flex;
  width: 100%;
  max-height: 100%;
}
img {
  max-width: 100%;
}