当弹性项目包含可变宽度图像时，柔性容器的宽度不会扩大

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>