justify-content: space-around在嵌套类元素中失效的排查求助

直接为aside元素设置Flex布局时，justify-content: space-around可正常生效，代码及效果如下：

CSS 代码 #

aside {
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #2800da;
}

i.fa {
  font-size: 0.9em;
}

HTML 代码 #

<aside>
  <i class="fa fa-bars"></i>
  <i class="fa fa-home"></i>
  <i class="fa fa-search"></i>
  <i class="fa fa-volume-up"></i>
  <i class="fa fa-user"></i>
  <i class="fa fa-spotify"></i>
  <i class="fa fa-cog"></i>
  <i class="fa fa-soundcloud"></i>
</aside>

正常效果：

但将aside嵌套在带有.LeftNavBar类的div中后，即便给aside的justify-content: space-around添加!important，该属性也完全失效——调试器中开关该属性无任何效果，其他样式可正常应用。代码及效果如下：

CSS 代码 #

.LeftNavBar {
  aside {
    flex: 0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around !important;
    align-items: center;
    background-color: #ff0000;

    i.fa {
      font-size: 0.9em;
    }
  }
}

HTML 代码 #

<div class="LeftNavBar">
  <aside>
    <i class="fa fa-bars"></i>
    <i class="fa fa-home"></i>
    <i class="fa fa-search"></i>
    <i class="fa fa-volume-up"></i>
    <i class="fa fa-user"></i>
    <i class="fa fa-spotify"></i>
    <i class="fa fa-cog"></i>
    <i class="fa fa-soundcloud"></i>
  </aside>
</div>

失效效果：

请问该问题的原因是什么？

内容的提问来源于stack exchange，提问作者AG_HIHI