flex子元素，插入img设置高度100%，宽度超出_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

flex的子元素div继承了父元素的高度。在子元素插入图片设置图片高度为100%，图片的高度填满父元素，但是宽度超出。请问这是为什么？如何解决？

<body>
    <div style="height: 300px; width: 500px; background: red; display: flex;">
        <div style="background: mediumseagreen">
            <img src="../../static/imags/voidlogo.jpg" style="height: 100%">
        </div>
    </div>
</body>

###

当你设置height:100%的时候会根据父元素的height来设置高度，但是这里没有明确设置height，但是又设置flex，再flex下面的子元素的高度是和父元素的高度一致的。所以这里设置height:100%，高度显示是正常的.
个人认为应该是以下原因导致的。
1、img查找父元素的height发现是auto于是按原长度显示，这时将父元素撑开了
2、flex生效将子元素的高度拉伸压缩到设置了flex元素的高度
3、img更新视图，高度和父元素同步，但是被撑开的img父元素没有还原，所以会出现这种情况
解决：
img父元素设置height:100%，就是再第一步找到了父元素的height就可以了