フレックスアイテムに可変幅イメージが含まれているとフレックスコンテナの幅が拡大しない

Question

フレックスアイテムに可変幅イメージがmax-height: 100%;に設定されている場合に問題が発生します。フレックスボックスが読み込まれると、フレックスアイテムの現在のサイズの幅が正しく取得されますが、ブラウザのサイズを変更してイメージのサイズを縮小（または増加）させると、外側のコンテナは新しい幅に追従しません。

コードスニペットをフルスクリーンで実行すると、最初の読み込み時に画像がピンク色のボックスで完全に囲まれますが、サイズを変更すると（高さを小さくすると）画像が縮小し、フレックスコンテナは同じ幅。

.flex { 
 
    display: inline-flex; 
 
    background-color: deeppink; 
 
    height: calc(100vh - 20px); 
 
    border: 10px solid deeppink; 
 
} 
 

 
.flex-left { 
 
    width: 250px; 
 
} 
 

 
.flex-right img { 
 
    width: auto; 
 
    min-width: 0; 
 
    max-height: 100%; 
 
}

<div class="flex"> 
 
    <div class="flex-left"> 
 
    <h2>Testing headline</h2> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p> 
 
    </div> 
 
    <div class="flex-right"> 
 
    <img src="http://unsplash.it/1000/650" alt=""> 
 
    </div> 
 
</div>

Answer 1

イメージコンテナに割合の高さを追加してみてください。

イメージは、寸法がパーセンテージで設定されているので、すでに柔軟です。コンテナの高さのパーセンテージでは、コンテナも柔軟になります。

jsfiddle demo

.flex { 
 
    display: inline-flex; 
 
    background-color: deeppink; 
 
    height: calc(100vh - 20px); 
 
    border: 10px solid deeppink; 
 
} 
 

 
.flex-left { 
 
    width: 250px; 
 
} 
 

 
.flex-right { 
 
    height: 100%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="flex"> 
 
    <div class="flex-left"> 
 
    <h2>Testing headline</h2> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p> 
 
    </div> 
 
    <div class="flex-right"> 
 
    <img src="http://unsplash.it/1000/650" alt=""> 
 
    </div> 
 
</div>