Javascript JS动画不会使div变大

我想在用户点击时将div放大。我知道我访问该函数是因为我收到警告消息“动画结束”。我想让我的div和页面一样大。 这是我的css代码：

.item {
        flex: 0 25%;
        height: 100px;
        margin-bottom: 2%; /* (100-32*3)/2 */
        height: 200px;
        box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
        background-color: #C15D5D;;
        background-size: 100%;
        overflow: hidden;
        position:relative;
        overflow:hidden;
      
    }

    .item.green,#green-item{
      background:#71B083;
      position:relative;
      overflow:hidden;
    }

这是我的HTML代码

    <div onclick="anim()" class="item green" id="green-item">
        <div class="ellipse green"></div>
        <p class= "price">225€</p>
        <img src="glasses1.png" class="glasses1">
        <pre class="text1">Black Gold Imogene
        </pre>
    </div>
<script type="application/javascript">
        object = document.getElementById("green-item");
        function anim(){
            object.style.width = "40%"; 
            object.style.height = "auto"; 
            object.style.transition = "width 0.5s ease"; 
            alert("End of the animation"); 
    }
</script>

225欧元
黑金伊莫金
object=document.getElementById（“绿色项”）；
函数anim（）{
object.style.width=“40%”；
object.style.height=“自动”；
object.style.transition=“宽度0.5s”；
警报（“动画结束”）；
}

如果我正确理解了您希望它做什么——这个代码片段应该做什么？尝试使用“vh”和“vw”（视图高度/视图宽度）css单位。此外，我还添加了一个

*{margin:0}

样式来删除页边距，并将其放在边缘，使其“与页面一样大”

*{
保证金：0
}
.项目{
弹性：0.25%；
高度：100px；
保证金底部：2%；/*（100-32*3）/2*/
高度：200px；
盒影：3px4x10pxRGBA（0,0,0,0.2）；
背景色：#C15D5D；；
背景大小：100%；
溢出：隐藏；
位置：相对位置；
溢出：隐藏；
}
.项目.绿色，#绿色项目{
背景#71B083；
位置：相对位置；
溢出：隐藏；
}

225欧元
黑金
伊莫金
object=document.getElementById（“绿色项”）；
函数anim（）{
object.style.width=“100vw”；
object.style.height=“100vh”；
object.style.transition=“宽度0.5s”；
警报（“动画结束”）；
}

似乎有效，但它只是垂直下降（可能是因为我的flex box）。此外，没有展开动画。它只是由小变小