flex容器下图片高度不生效

场景

常见列表左文右图或者左图右文的页面结构

页面结构

<div class="box">
    <img src="../img/icon-account.png" alt="">
    <p>文字</p>
</div>

样式

.box{
    width: 100px;
    height: 100px;
     line-height: 30px;
    border: 1px solid #ddd;
    display: flex;
}
img{
    width: 20px;
}

出现的问题

图片的高度不能根据高度自适应，而是充满整个容器

处理方案

1. 给.box 增加align-items：center或者flex-start或者flex-end 都可以，看布局需要
2. 给img增加一个新的容器

<div class="box">
    <div><img src="../img/icon-account.png" alt=""></div> 
    <p>文字</p>
</div>

来源：https://www.cnblogs.com/bonly-ge/p/11924394.html