overflow: scroll; の前にある overflow: hidden; を授業ではコメントアウトしていますが、コメントアウトしないと最後の overflow: scroll; が反映されないのはなぜでしょうか？

.box2 {
    background-color: skyblue;
    width: 50%;
    height: 50%;
    /* overflow: hidden; */
    overflow: scroll;
}

例えば、width:50%; の後に width: 60%; を指定するとコメントアウトしなくても最後の数値が反映されます。

.box1 {
   background-color: orange;
   width: 200px;
   height: 200px;
}