师在悬停时展开的过渡不适用于右侧的师

Question

我正在尝试进行过渡，一旦您将鼠标悬停在该部门上，该部门就会扩大，但它不适用于最右边的部门，当我将鼠标悬停在该部门上时，它只会以一种奇怪的方式出现故障。

这是 HTML：

<div class="home grow">
  <a routerLink = "">HOME</a>
</div>
<div class="books grow">
  BOOKS
</div>
<div class="about grow">ABOUT</div>

这是 CSS：

* {
    margin: 0;
    padding: 0;
}

div {
    float: left;
    width: 33.33%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}


.home {
    background-color: grey;
}

.books {
    background-color: lightblue;
}

.about {
    background-color: lightcyan;
}

.grow {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    overflow: hidden;
    transition: 1.5s;
}

.grow:hover {
    width: 90vh;
}

我遇到的另一个问题是，当我扩展其他部门时，右边的部门完全消失了

我尝试通过执行以下操作对右侧的元素进行特殊转换

HTML：

<!-- modified the "About" division -->
<div class= "about grow-right">about</div>

CSS：

/* just added a random negative value the the margin to check if it works */
.grow-right:hover {
    margin-left: -80px;
}

但是它没有用，当我将鼠标悬停在它上面时，它只是在右边留下了一个空白