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

This is absolutely doable with some flexbox magic. Have a look at this pen.

You need css like this:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

This will work in IE10+

Answer 2

The link below will demonstrate how I accomplished this. Not very hard - just have to use some clever front-end dev!!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Answer 3

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;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

Link to jsFiddle: