I have a container with display: flex and align-items: center and it works as expected when the child element is smaller than the container.
But when the child element is bigger than the container, you cannot scroll to the top.
You can see here that when the child is smaller than the container, it is vertically aligned and works as expected.
.container {
display: flex;
align-items: center;
height: 300px;
overflow: auto;
background: rgba(0, 0, 0, .3);
margin: 40px;
}<div class="container">
<div>
1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
</div>
</div>But when the child is bigger than the container, there is no ability to scroll to the top.
.container {
display: flex;
align-items: center;
height: 300px;
overflow: auto;
background: rgba(0, 0, 0, .3);
margin: 40px;
} <div class="container">
<div>
1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
8. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
9. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
10. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ducimus! Officia ullam quas voluptate fuga
laboriosam quis eum! Fuga placeat rerum molestiae aspernatur consequatur consectetur iste accusamus totam in
mollitia!
</div>
</div>