如何使div的高度与字形图标的内容相同？

<div class="container">
  <i class="icon"></i>
</div>

<style>
.container {
  display: flex;
  align-items: center;
}
</style>

<div class="container"></div>

<style>
.container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1em; /* 根据字形图标的大小调整 */
}
</style>