IE CSS bug：IMG原始高度影响父高度答案

【问题标题】：IE CSS bug: IMG original height affecting parent heightIE CSS bug：IMG原始高度影响父高度
【发布时间】：2016-01-25 21:07:08
【问题描述】：

我有一个 PARENT flexbox div（它也是列 flexbox 的一部分）：

div.flex_block {
        width:100%;
        flex: 1 1 auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;  
        padding-bottom:30px; 
}

它包含 2 个孩子：

.flex_block  .content{
    max-width:none; /* override other code */
    flex: 0 1 50%;
}

.flex_block  .image{
    max-width:none; /* override other code */
    flex: 0 1 35%;
}

第一个孩子有一些文字。第二个有一个超大的图像，设置为 100% 宽度，所以它缩小到它的容器。

.flex_block  .image img{
    display:block;
    width:100%;
    height: auto;
}

它在 Chrome 中按预期工作，但在 IE 中，原始 img 的高度似乎扩展了 PARENT 容器（即使它确实缩小以适合其容器）。如果我设置 img 高度，问题就解决了。 AUTO 没有修复它。显然，我需要将其作为响应式设计，因此我不希望以像素为单位设置高度。

以下是所发生情况的可视化：

我也尝试过使用具有百分比宽度的内联元素而不是弹性框，但问题仍然存在。

【问题讨论】：

你有没有想过解决这个问题？我现在有类似的问题让我发疯。 MS好像已经用IE12和IE13解决了，但是11是个问题。

标签： css image internet-explorer size flexbox

【解决方案1】：

添加到容器的可能解决方案：

flex-shrink: 0;

或者更具体到 IE11：

-ms-flex-negative: 0;

这似乎解决了我的问题，但您的结果可能会有所不同。

我不会假装理解为什么它有效，但它似乎对我有效。 :)

【讨论】：