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

Question

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

这在 Google Chrome 中没有问题。图像可以增长到 flexbox 分配的最大剩余宽度。但是，它在 IE11 中不起作用。图像拉伸了它的容器框，我一直在谷歌搜索并尝试不同的解决方案但无济于事。看来我的情况与其他类似问题有些不同。

这是它在 IE 中的样子：

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

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

Answer 1

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

(1) 我建议你在 .detail img[=41= 中将 max-width 替换为 width ] class。

(2) 我建议您将 flex: 1 0 0; 替换为 flex: 0 0 auto; in [=34= .detail class.

编辑：-

在一个额外的 div 中添加了 img 标签解决了@Xegara 告知的问题。它还适用于 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 中的输出：

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

max-width of image not working in flexbox for IE 11 but works on google chrome

html

css

flexbox

internet-explorer-11