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 >
<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 >
<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>CodePudding user response：
It's because your .container div has align-items:center. The overflow scroll property is applied the containing div and not the child div. The overflow scroll bar might look to be placed on the child div but it's not, it's actually placed on the .container div. The text is overflowing the inner div and then centered vertically via the align-items property which is why it can't be seen. It's the child div that's getting scrolled, not the text.
If you're trying to vertically align the text to the center then the scroll bar won't work anyway as when you scroll to the top, the browser will automatically recenter the content as you scroll. You'll have to add a listener to the resize event and onl oad event to detect this and then remove the vertical align property if overflow is noted. You could also use a Resize Observer too. See the code below (run in full screen mode to see)
EDITED TO ADD There's a non-javascript way of doing this if you use display:table and display:table cell. See below. Also Rizeen's solution works too, so there's a range of options.
window.onload = () => {
window.onresize = () => {
containerOverflowMonitor();
}
containerOverflowMonitor();
}
function containerOverflowMonitor() {
const container = document.querySelector('.container');
if (container.scrollHeight <= container.clientHeight) {
container.classList.add('nooverflow');
} else {
container.classList.remove('nooverflow');
}
}.container {
display: flex;
background: rgba(0, 0, 0, .3);
margin: 40px;
height: 300px;
overflow: auto;
}
.container.nooverflow {
align-items: center;
}<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>.container {
display: table;
background: rgba(0, 0, 0, .3);
margin: 40px;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.content {
overflow-y: auto;
max-height: 300px;
}<div class='container'>
<div class='cell'>
<div class='content'>
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!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!
</div>
</div>
</div>CodePudding user response：
Try using display: grid; instead of flex
.container {
display: grid;
align-items: center;
height: 300px;
overflow: auto;
background: rgba(0, 0, 0, .3);
margin: 40px;
} <div >
<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>CodePudding user response：
Having the container as display: block would fix this!
.container {
display: block;
align-items: center;
height: 300px;
overflow: auto;
background: rgba(0, 0, 0, .3);
margin: 40px;
}<div >
<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>