html - 部分内图标和 div 元素的 CSS 宽度依赖性

Question

谁能给我解释一下，为什么当我给div标签设置宽度时，i图标的宽度是我定义的，但是当我不给div标签设置宽度时，图标的宽度是不可预测的？

图标的宽度也会根据段落文本的长度而变化。

（在正文section的main标签内）

.about {
  display: flex;
}

.about div {
  display: flex;
  flex-direction: column;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<section class="about">
  <i class="glyphicon glyphicon-user"></i>
  <div>
    <h5>more text</h5>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure fugit, illum quasi in, amet, iste id voluptatem exercitationem atque numquam aliquam libero saepe laboriosam impedit! Debitis, ipsa. Ducimus, deleniti?
    </p>
  </div>
</section>

标签： htmlcss