TranslateY is increasing the size of page-CodePudding

In first-child of container, translateY property make element disappear but when it comes to last child it increases the size of page and stays on page. I want it to disappear and gives the transition effect on both the child.

body{
    height: 100vh;
}
.container{
    height: 100vh;
    width: 100vw;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.container > :first-child{
    transform: translateY(-200px);
}

.container > :last-child{
    transform: translateY(200px);
}

<body>
    <div >
        <p>Abc</p>
        <p>Xyz</p>
        <p>Abc</p>
    </div>
</body>

CodePudding user response：

Just add overflow : hidden; style to the container class.

body{
    height: 100vh;
}
.container{
    height: 100vh;
    width: 100vw;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    overflow:hidden;

}
.container > :first-child{
    transform: translateY(-200px);
}

.container > :last-child{
    transform: translateY(200px);
}

<body>
    <div >
        <p>Abc</p>
        <p>Xyz</p>
        <p>Abc</p>
    </div>
</body>