将高度设置为0 并隐藏滚动条 适合动画效果

.box2 {
    width: 100px;
    height: 0;
    overflow: hidden;
    transition: height 0.3s,background-color 0.3s;  //动画效果
}
.box1:hover .box2 {
    height: 100px;
    width: 100px;
    background: red;
}

隐藏像素不占位置

//隐藏元素  不占位置
.box1 {
    width:100px;
    height:100px;
    background:red;
    display:none;
}

占据位置的隐藏元素

.box2 {
    height: 100px;
    width: 100px;
    background: red;
    visibility: hidden;
}