指定された高さを持たないコンテナ内のネストされたフレックス要素

Question

コンテナのサイズに拡大するイメージが必要な状況があります。これはフレックスボックスで、固定高さを持つことはできません。

直接容器は、数層のフレックスボックスの内側にネストされ、外側の層は80vhの高さにある必要があります。

コンテナの高さと幅がパーセンテージとして設定されていると、画像の縦方向のサイズが変更されないことがあります。誰もがこのために回避策を持っていますか？私は、幅広いアスペクト比（いくつかの肖像画、いくつかの風景）を持ついくつかの画像に対して一貫した解決策が必要です。

ありがとうございます！

は、コードとCodePenリンクについては、以下を参照してください： https://codepen.io/anon/pen/NgZByM?editors=1100

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

Answer 1

私はあなたのコードのペンで見るものから、問題は、画像がのdivのを超えているという事実です。

私は最大の高さを持つように姿を変えています代わりに高さの100％：100％

それは今OKになります。https://codepen.io/anon/pen/Zygxqw?editors=1100

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