图像的最大宽度在IE 11的flexbox中不起作用，但在Google Chrome上有效

debugcn 发表于 Dev

Xegara

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

这可以在Google Chrome浏览器中正常运行。图像可以增长，直到flexbox分配的最大剩余宽度为止。但是，它在IE11中不起作用。图片拉伸了其容器框，我一直在谷歌搜索，尝试各种解决方案均无济于事。看来我的案子与其他类似问题有点不同。

这是IE中的样子：

你能帮我发现问题吗？我提供了一个插件，您可以在其中尝试解决方案。

CSS：

        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;
        }

HTML：

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

https://plnkr.co/edit/q6Xme6ETvW20Gw57CIWQ?p=preview

迪帕克

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

（1）我建议你更换最大宽度与宽度在.detail IMG类。

（2）建议您替换flex：1 0 0; 使用flex：0 0自动; 在.detail类中。

编辑：-

通过@Xegara告知，在额外的div内添加了img标签可解决此问题。它还适用于max-width对于IE 11浏览器。

修改后的代码：

<!DOCTYPE html>
<html>

<head>
    <script src="script.js"></script>
    <style>
        body {
          width: 100%;
        }
        
	.extra_div{
          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: 0 0 auto;*/
		
            width: 100%;
        }
        
        .detail {
            display: flex;
            /*flex: 1 0 0;*/
            flex: 0 0 auto; /*-------------------------made change here */
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .detail img {
            max-width: 100%;   /*-------------------------made change here */
        }
        
        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }
    </style>
</head>

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

</html>

IE 11中的输出：