當彈性項目包含可變寬度圖像時，柔性容器的寬度不會擴大

Question

在柔性項目中將可變寬度圖像設置爲max-height: 100%;時會出現問題。當頁面加載彈出框成功獲取flex-item當前大小的寬度時，但如果調整強制縮小圖像大小（或增加）的瀏覽器，則外部容器不會遵循新的寬度。

如果在全屏幕中運行下面的代碼片段，您會在初始加載時看到圖像完全被粉紅色框包圍，但是當您調整大小（使高度更小）時，圖像縮小並且柔性容器保持在寬度相同。

.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>