最小高度不正常

Question

我有这样的psd

当将鼠标悬停在circle.text上时，应显示转换（宽度）。 我为此写了这些样式但是当文本长度增加时，它被放在圈子的旁边， HTML代码：

<div class="line-position">
    <div class="container position-relative">
        <ul class="nav nav-line flex-column">
            <li class="nav-item">
                <span>about us</span>
            </li>
            <li class="nav-item">
                <span>about us</span>
            </li>
            <li class="nav-item">
                <span>about us</span>
            </li>
            <li class="nav-item">
                <span>about us</span>
            </li>
            <li class="nav-item">
                <span>about us</span>
            </li>
        </ul>
    </div>
</div>

sass代码：

.container{
  background-color: grey;
  position: relative;
  padding:50px;
  height: 500px;
}
.line-position {
  position: absolute;
  width: 100%;
  height:100%;
  top: 50%;
  left: 0;
  z-index: 99;
  .nav-line {
    margin: 0;
    padding: 0;
    list-style-type: none;
    align-items: center !important;
    justify-content: center !important;
    .nav-item {
      position: relative;
      width: rem(11);
      min-height: rem(11);
      margin: {
        bottom: rem(30);
      };
      padding: {
        left: 0;
      };
      font-family:Tahoma ;
      font-size: rem(13.33);
      font-weight: bolder;
      color: rgba(255,255,255,0.6);
      transition: width 0.5s ease , padding 0.6s ease;
      &:before {
        content: '';
        position: absolute;
        width: rem(11);
        height: rem(11);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50%;
        top: 0;
        left: 0;
        transition: border 0.5s ease , background 0.5s ease;
      }
      span {
        opacity: 0;
        display: none;
        position: absolute;
        top: rem(41);
        right: rem(-43);
       min-width: rem(11);
        transition: opacity 0.5s ease,width 0.5s ease;
        transform: rotate(-90deg);
      }
      &:hover {
        min-height: rem(100);
     span {
          min-width: rem(100);
          opacity: 1 !important;
          display: inline-block !important;
        }
        &:before {
          border: 1px solid rgba(255,255,255,0.0);
          background:  rgba(255,255,255,0.6);
        }
        + .nav-item{
          &:before {
            border: 1px solid rgba(255,255,255,0.0);
            background:  rgba(255,255,255,0.6);
          }
        }
      }
      &.active {
        width: auto;
        padding: {
          left: rem(40);
        };
        span {
          opacity: 1;
        }
        &:before {
          border: 1px solid rgba(255,255,255,0.0);
          background:  rgba(255,255,255,0.6);
        }
        + .nav-item{
          &:before {
            border: 1px solid rgba(255,255,255,0.0);
            background:  rgba(255,255,255,0.6);
          }
        }
      }
    }
  }
}

怎么了？我无法解决这个问题。我为li和span定义了最小高度，但它不起作用。我不知道为什么。