CODEWITHSUNDEEP
htmlcssscrolloverflow
Mostafa Ellethy
Mostafa Ellethy

Reputation: 62

Setting overflow to scroll on fixed div doesn't work

Overflow scroll won't work on fixed div, here is codepen demo 

        #side-navbar {
          overflow: scroll;
          position: fixed;
          min-height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        }


    #side-navbar .logo img {
      margin: 0.5rem;
      width: 5rem;
      height: auto;
    }

    #side-navbar .menu-container {
      overflow:visible;
      min-height: calc(100vh - 24.6rem);
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    #side-navbar ul.social-menu {
      overflow: visible;
    }
</pre>

Upvotes: 5

Views: 5679

Answers (2)

Cannicide
Cannicide

Reputation: 4520

Two things: first, try using height instead of min-height. Second, use overflow-y:auto, it works way better than overflow:scroll. Here is your code:

 #side-navbar {
          overflow-y: auto;
          position: fixed;
          height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        }
<div id="side-navbar">
<hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr>

</div>

It works in the snippet. Try it in your code. If you don't want to use overflow-y auto, just make sure to use overflow-y:scroll then.

Upvotes: 5

Mostafa Ellethy
Mostafa Ellethy

Reputation: 62

Problem solved. Using min-height keeps the menu render forever but when used height only scroll works perfectly.

Upvotes: -3

Related Questions