IE11 flex布局内容图片max-width: 100%设置无效且溢出

星空
  • 1.2k

IE11中flex布局内容图片设置了max-width: 100%但是图片没有自动换行,max-width也没有起到效果,该如何处理呢?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .form {
            max-width: 600px;
            background: aliceblue;
        }

        .form-item {
            display: flex;
        }

        .content {
            flex: 1 1 auto;
        }

        .des-detail {
            max-height: 200px;
            overflow: auto;
            word-break: break-word;
        }

        .des-detail img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="form">
        <div class="form-item">
            <div>label:</div>
            <div class="content">
                <div class="des-detail">
                    <p>
                        这是一段文本,紧接着细长的2张图片和3张小图片
                        <img src="https://img1.baidu.com/it/u=2868347852,902588297&fm=26&fmt=auto&gp=0.jpg">
                        <img src="https://img1.baidu.com/it/u=2868347852,902588297&fm=26&fmt=auto&gp=0.jpg">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

如上代码,在IE11和Chrome显示不同,Chrome图片会换行,且最大宽度保持和容器一致,IE11则横向溢出,无换行。

回复
阅读 396
2 个回答
✓ 已被采纳

将content样式改为 flex: 1 1 0%; 即可。
完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .form {
            max-width: 400px;
            background: aliceblue;
        }

        .form-item {
            display: flex;
        }

        .content {
            flex: 1 1 0%;
        }

        .des-detail {
            max-height: 200px;
            overflow: auto;
            word-break: break-word;
        }

        .des-detail img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="form">
        <div class="form-item">
            <div>label:</div>
            <div class="content">
                <div class="des-detail">
                    <p>
                        这是一段文本,紧接着细长的2张图片和3张小图片
                        <img src="https://img1.baidu.com/it/u=2868347852,902588297&fm=26&fmt=auto&gp=0.jpg">
                        <img src="https://img1.baidu.com/it/u=2868347852,902588297&fm=26&fmt=auto&gp=0.jpg">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qiushibaike.com%2Fsystem%2Favtnew%2F943%2F9436689%2Fmedium%2F20130606202320.jpg&refer=http%3A%2F%2Fpic.qiushibaike.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633259122&t=a81de6804462f0457f95b073c8ae63e7">
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

弹性布局换行用 flex-wrap: wrap

你知道吗?

宣传栏