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>