How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

Question

I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content dete

Answer 1

Here is the pure HTML and CSS solution.

1. We create a container box for navbar with position: fixed; height:100%;

2. Then we create an inner box with height: 100%; overflow-y: scroll;

3. Next, we put out content inside that box.

Here is the code:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

  

    
Navbar content Start
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content
    
Navbar content End
    


  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum
  
Lorem Ipsum

Link to jsFiddle: