Reputation: 347

Overflow-y scroll causes content to cut off

I currently have a container that has a max-height of 800px. It also has overflow-y: scroll. What I am trying to accomplish is simple (Probably not so simple, hence why I am asking you guys!).

I want to continue to have this overflow-y scroll. However, I have content which gets cut off. I have a div with class future-dropdown which I want content inside to purposely overlay this container. If you take a look at the code snippet, my content inside the div gets cut off as it should because of the overflow-y scroll.

How can I get around this and still have this? I still need this scrollable container but I also need a way to still have my content show in that position.

Suggestions please!

    * {
        padding: 0;
        margin: 0;
    }
    
    .scroll-list {
        max-height: 800px;
        overflow-y: scroll;
        border-radius: 5px;
        border: 5px solid blue;
        width: 400px;
    }
    
    li {
        height: 200px;
        width: 100%;
        border-radius: 2px;
        background-color: white;
        font-size: 15px;
        text-align: center;
        list-style-type: none;
        background: lightgray;
        /* margin: 0 auto; */
    }
    
    .future-dropdown {
        position: relative;
        left: 200px;
    }

  <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="scroll-list">
                <ul>
                    <li>Content <div class="future-dropdown">Future dropdown</div></li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                </ul>
            </div>
            <script src="" async defer></script>
        </body>
    </html>

Upvotes: 3

Answers (3)

Mohamed Tarek

Reputation: 56

for anyone who came here because there is content hidden behind the scrollbar, check the html, body, and/or container's width. For me, changing the width from 100vw to 100% solved it.

Upvotes: 0

Nik

Reputation: 1709

Have a look at this code snippet.

I've added following css,

.future-dropdown1 {
    position: relative;
    text-align: right;
}
.future-dropdown2 {
    position: relative;
    float: right;
    margin-top: 20px;
}

Since positioning the div with left property would cause it to start from the defined pixel position, it was getting cropped.

* {
        padding: 0;
        margin: 0;
    }
    
    .scroll-list {
        max-height: 800px;
        overflow-y: scroll;
        border-radius: 5px;
        border: 5px solid blue;
        width: 400px;
    }
    
    li {
        height: 200px;
        width: 100%;
        border-radius: 2px;
        background-color: white;
        font-size: 15px;
        text-align: center;
        list-style-type: none;
        background: lightgray;
        /* margin: 0 auto; */
    }
    
    .future-dropdown1 {
        position: relative;
        text-align: right;
    }
    .future-dropdown2 {
        position: relative;
        float: right;
        margin-top: 20px;
    }

<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="scroll-list">
                <ul>
                    <li>Content <div class="future-dropdown1">Future dropdown</div></li>
                    <li>Content <div class="future-dropdown2">Future dropdown</div></li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                </ul>
            </div>
            <script src="" async defer></script>
        </body>
    </html>

Upvotes: 0

MartinBA

Reputation: 797

Maybe you can do something like this

li {
    height: 200px;
    width: 100%;
    border-radius: 2px;
    background-color: white;
    font-size: 15px;
    text-align: left; /*Change from center to left*/
    list-style-type: none;
    background: lightgray;
    padding: 20px; /*Add some padding*/
    /* margin: 0 auto; */
}

Let me know if that help you!

Upvotes: 0

Overflow-y scroll causes content to cut off

Answers (3)

Related Questions