IE11 flex布局内容图片max-width: 100%设置无效且溢出
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则横向溢出，无换行。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将content样式改为
flex: 1 1 0%;即可。完整代码如下：
弹性布局换行用
flex-wrap: wrap。