Scrollable Content overflow

Question

I want the div "Scrollable" to stay within the div "Animation-Menu", but I tried several ways & came to no result.

Here is my index.html file

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>

Here is my style.css file

#animation-menu {
    left: 0;
    top: 0;
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:hidden;
}

#animation-menu > nav {
    text-align: center;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow-y: auto;
}

Maybe you can see that I also use an own scrollbar. But this should be within the div "animation-menu". The navigation bar should be fixed at the top & only the div "scrollable" should be scrollable.

Hosein Shendabadi · Accepted Answer · 2020-08-01 16:17:53Z

For navigation bar to be fixed at the top, you should add position:fixed property to the navbar.

#animation-menu {
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    overflow:auto;
}

#animation-menu > nav {
    text-align: center;
    width: 25rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:auto;
     z-index:99;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow:hidden;
    margin-top:3rem;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>

See the snippet in full page.
Let me know if you have any other things in mind.

Ahmed Mansour · Accepted Answer · 2020-08-01 16:25:10Z

0

if you just assigned a height to #scrollable, I think it will fix your problem

#scrollable {
    overflow-y: auto;
}

to

#scrollable {
      height: 500px;
}

see the edited code

answered Aug 1, 2020 at 16:25

Ahmed Mansour

6107 silver badges16 bronze badges

Collectives™ on Stack Overflow

Scrollable Content overflow

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related