Overflow auto not showing scrollbar-CodePudding

I have a grid parent, with 2 columms. The left child has the same height as the parent (here is 100vh) and the right child is 1000px, which is greater than the parent.

HTML:

<body>
    <div class="leftcol"></div>
    <div class="rightcol"></div>
</body>

CSS:

body{
    background-color: white;
    display: grid;
    grid-template-columns: 2fr 3fr;
    margin: 0;
    overflow: hidden;
}

.leftcol{
    background-color: grey;
    height: 100vh;
    width: 100%;
}

.rightcol{
    background-color: black;
    height: 1000px;
    width: 100%;
    overflow: auto;
}

I only want the right child to be scrollable, since it's height is greater than the parent, the left child will stay still. I've read some other posts and they suggest using overflow: auto on the child but mine is not working. Can anybody tell me what i did wrong here? Thank you.

CodePudding user response：

There is no scrollbar because you don't need to scroll. If you want to show a scrollbar though, you can replace overflow: auto; with overflow: visible;. This makes it show the scrollbar no matter what.

You can learn more about overflows here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content

CodePudding user response：

try it

<body>
    <div class="leftcol">
        <p class="top">top</p>
        <p class="bottom">bottom</p>
    </div>
    <div class="rightcol">
        <p class="top">top</p>
        <p class="bottom">bottom</p>
    </div>
</body>

<style type="text/css">
    body{
        background-color: white;
        display: grid;
        grid-template-columns: 2fr 3fr;
        margin: 0;
    }

    .leftcol{
        background-color: grey;
        height: 100vh;
        width: 50%;
        position: fixed;
        left: 0;
        top: 0;
    }

    .rightcol{
        background-color: black;
        height: 1000px;
        width: 50%;
        position: absolute;
        right: 0;
        top: 0;
    }
    .leftcol p,
    .rightcol p {
        text-align: center;
        color: #fff;
    }
    .rightcol p.top {
        top: 0;
    }
    .rightcol p.bottom {
        bottom: 0;
        padding-top: 900px;
    }
    .leftcol p.bottom {
        padding-top: 80vh;
    }
</style>