Html 图像的最大宽度不适用于IE 11的flexbox，但适用于google chrome

我正在使用flexbox创建一个2乘2的网格布局，其中第一列项目合并在一起，如下所示：

这在谷歌Chrome上运行没有问题。图像可以增长到flexbox分配的最大剩余宽度。但是，它在IE11中不起作用。这张图片拉长了它的盒子，我一直在谷歌上搜索，尝试不同的解决方案，但都没有用。看来我的情况和其他类似的问题有点不同

以下是IE中的外观：

你能帮我找出这个问题吗？我提供了一个plunker，您可以在其中尝试您的解决方案

CSS:

HTML:

名称

---

IE浏览器与Flex存在一些问题。使用flex无法正确计算值

（1） 我建议您将中的最大宽度替换为宽度

（2） 我建议您更换flex:100带柔性：0 0自动在.detail类中

编辑：-

在一个额外的div中添加了img标签，解决了@Xegara通知的问题。它还可用于IE 11浏览器的最大宽度

修改代码：

身体{
宽度：100%；
}
·额外分区{
宽度：100%；
}
.元素{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.姓名{
显示器：flex；
对齐项目：居中；
证明内容：中心；
flex:0100px；
字体大小：粗体；
}
.细节包装{
显示器：flex；
弯曲方向：立柱；
/*flex:0自动*/
宽度：100%；
}
.细节{
显示器：flex；
/*弹性：100*/
flex:0 0自动；/*----------------------------在此处进行了更改*/
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
.详细信息img{
最大宽度：100%；/*----------------------------在此处进行更改*/
}
.name、.detail{
边框：1px实心；
利润率：8px；
填充：8px；
文本对齐：居中；
断字：断字；
}
名称

是否尝试将

显示：block

设置为

img

？它不起作用。设置宽度似乎不是问题，但如果图像小于容器，则我希望它以原始大小显示。将宽度设置为100%将始终使图像适合容器。我将img封装在另一个宽度为100%的div容器中，它成功了！您可以相应地修改您的答案，或者提出更好的解决方案（如果有），我将接受您的答案。我根据您上次的评论更新了我的答案。谢谢你的理解。

        body {
          width: 100%;
        }

        .element {
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 100px;
            font-weight: bolder;
        }

        .detail-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1 0 0;
            width: 100%;
        }

        .detail {
            display: flex;
            flex: 1 0 0;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .detail img {
            max-width: 100%;
        }

        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }

    <div class="element">
        <div class="name">name</div>
        <div class="detail-wrapper">
            <div class="detail">
                <img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
            </div>
            <div class="detail">
                <a href="#">url</a>
            </div>
        </div>
    </div>