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 determines the height, the width is fixed. The problem is that if the content is too much, the div will be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixed and the div won't scroll.)

I tried to set overflow-y:auto; but that doesn't help either, the div doesn't seem to notice that part of it is outside of the window.

How can I make it's contents scrollable only, if needed, if the div hangs out of the window?

Oxidimetry

A solution with CSS calc() can be found here : https://mcmap.net/q/175372/-how-to-keep-scroller-in-view-inside-of-fixed-position-div-with-top-pixels-pushing-it-down/3168107. – Stannic

calc() is an experimental technology and may result in unexpected results. If you choose to use it, make sure you know your target audience and test it in those browsers. – Lew

Ran into same problem and used something like max-height: calc(100vh - 100px); where my navbar and paddings were making upto 100px – Stoichiometry

@Lew it doesn't seem to be experimental anymore so you might want to remove your comment, as it might prevent people from pursuing it as a solution to this problem. – Greegree

Answer 1

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

.stuck {
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  width: 180px;
  background-color: #eee;
  overflow-y: scroll;
}

.stuck p {
  margin: 10px;
}

.not-stuck {
  margin-left: 200px;
}

<div class="stuck">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="not-stuck">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
  litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
  nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam
  processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc
  nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
  insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam
  littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
  iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
  legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula
  quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>

You can do a percentage height as well:

.stuck {
  position: fixed;
  top: 0px;
  left: 0px;
  max-height: 100%;
  width: 190px;
  background-color: #eee;
  overflow-y: scroll;
}

.stuck p {
  margin: 10px;
}

.not-stuck {
  margin-left: 200px;
}

<div class="stuck">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="not-stuck">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
  litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
  nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam
  processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc
  nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
  insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam
  littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
  iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
  legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula
  quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>

Wept

Answer 2

Here is how I accomplished this. You just have to use some clever front-end dev!!

//start MOBILE NAV
$('#mobnav-btn').click(

  function() {
    $("html").toggleClass("mobile-menu-open");
    $(".xnav-wrapper").delay(500).queue(function(reset_scroll) {
      $(this).scrollTop(0);
      reset_scroll();
    });
  });
//end MOBILE NAV

html {
  left: 0%;
  position: relative;
  overflow-x: hidden;
  transition: all .2s ease;
}

body {
  font-family: arial;
  font-size: 14px;
  line-height: 20px;
  padding: 30px;
}


/* start MOBILE NAV */

#mobnav-btn {
  position: fixed;
  top: 50px;
  right: 50px;
  opacity: 1;
  color: #000;
  display: block;
  cursor: pointer;
  padding: 10px 9px;
  padding-bottom: 6px;
  font-size: 16px;
  border: 2px solid #DEDEDE;
  z-index: 999999999999;
  transition: all .2s ease;
  background-color: white;
  border-radius: 3px;
}

.mobile-menu #mobnav-btn .mobnav-btn-label {
  display: block;
}

.mobile-menu-open #mobnav-btn {
  background-color: #232128;
  border-color: #232128;
}

.mobile-menu-open {
  left: 50%;
  overflow: hidden;
}

.mobile-menu-open #mobnav-btn .mobnav-icon {
  color: white;
}

.xnav {
  position: fixed;
  background: #232128;
  width: 50%;
  left: -50%;
  bottom: 0%;
  top: 0%;
  z-index: 99999999999999999;
  zoom: 1;
  transition: all .2s ease;
}

.mobile-menu-open .xnav {
  z-index: 9999999999999;
  zoom: 1;
  left: 0%;
}

.xnav-wrapper {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.xnav ul {
  float: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.xnav ul ul {
  padding-left: 30px;
  font-size: 98%;
}

.sf-menu li {
  float: none;
  margin: 0px!important;
  background: none!important;
}

.sf-menu a,
.sf-menu .first a {
  background-image: none!important;
  color: white!important;
  padding: 15px;
  margin-left: 0px;
  margin-right: 0px;
  display: block;
  border-bottom: 1px solid #3f3b49;
  transition: all .2s linear;
  text-decoration: none;
}

.sf-menu a:hover {
  background-color: #3f3b49!important;
  padding-left: 20px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
}

.xnav-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.7);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(32, 32, 32, 0.05);
}


/* end MOBILE NAV */

<!-- start MOBILE BTN -->
<div id="mobnav-btn">
  <div class="mobnav-icon">
    Menu
  </div>
</div>
<!-- end MOBILE BTN -->

<!-- start REGULAR CMS NAV -->
<div class="xnav">
  <div class="xnav-wrapper">
    <ul class="sf-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Cupcakes</a>
        <ul>
          <li><a href="#">1.1 Cupcakes</a></li>
          <li><a href="#">1.2 Cupcakes</a></li>
          <li><a href="#">1.3 Cupcakes</a>
            <ul>
              <li><a href="#">2.1 Cupcakes</a></li>
              <li><a href="#">2.2 Cupcakes</a></li>
              <li><a href="#">2.3 Cupcakes</a></li>
            </ul>

          </li>
        </ul>
      </li>
      <li><a href="#">Doughnuts</a></li>
      <li><a href="#">Icecream</a></li>
      <li><a href="#">Banana Split</a> </li>
      <li><a href="#">Brownies</a></li>
      <li><a href="#">Lollipop</a></li>
      <li><a href="#">Pixie Stix</a></li>
      <li><a href="#">Bubble Gum</a></li>
      <li><a href="#">Chocolate Chips</a></li>
      <li><a href="#">Cherries</a></li>
    </ul>
  </div>
</div>
<!-- end REGULAR CMS NAV -->

<h1>Mobile Nav </h1>
<b><a href="mailto:[email protected]">[email protected]</a></b>
<br/>
<br/>The concept is very simple: Off-Canvas navigation based on the active state ( html.mobile-menu-open ). Mobile nav items options scroll if out of viewport.
<br/>
<br/>The CSS portion will be a little different because I had to create some styles that are natively in the framework. Also, the CSS portion will drop into your phone.css and tablet.css files. Cupcake ipsum dolor sit amet. Wafer tootsie roll I love oat
cake. Unerdwear.com icing bear claw liquorice marshmallow gummies cupcake tiramisu. Applicake cupcake powder jelly beans chupa chups muffin. Lollipop bear claw sweet roll macaroon. Jelly-o gummi bears apple pie. I love cheesecake carrot cake pudding toffee
marzipan chupa chups jelly beans dragée. Pie chocolate cake bear claw toffee gingerbread. Chupa chups bonbon lollipop topping I love. Cake dessert cheesecake candy canes sugar plum. Marzipan cookie apple pie muffin lemon drops. Chocolate cake oat cake
brownie cookie apple pie. I love I love sugar plum I love I love chocolate marshmallow lollipop.
<br/>
<br/>Apple pie ice cream dragée. Fruitcake cotton candy jujubes tootsie roll biscuit croissant caramels. Marzipan jelly-o candy I love lollipop bonbon. Applicake chocolate bar tootsie roll bonbon tiramisu jelly jelly beans. Marzipan I love sweet caramels
I love cupcake croissant marshmallow. Gingerbread danish marzipan jelly. Chocolate oat cake danish sugar plum bonbon. Pie gummi bears chocolate bar I love. I love halvah cotton candy sweet roll lollipop apple pie bear claw croissant. Sweet roll bear claw
donut topping. Cupcake I love jelly-o bear claw tootsie roll danish powder liquorice. Tart pastry tootsie roll I love.
<br/>
<br/>Cheesecake bear claw unerdwear.com unerdwear.com. Lemon drops chocolate oat cake donut unerdwear.com cheesecake dragée. Chocolate cake candy canes marzipan biscuit I love. Pudding biscuit powder. Pie gingerbread oat cake apple pie jujubes bonbon
powder. Danish I love I love gingerbread toffee. Icing I love chocolate. Halvah I love I love soufflé gingerbread jelly-o. Lollipop biscuit wafer marzipan I love cheesecake sesame snaps. Oat cake candy canes marzipan croissant. I love caramels cheesecake
chocolate toffee. Fruitcake powder gummies applicake cake lollipop topping icing.
<br/>
<br/>Wafer icing I love sweet jelly. I love muffin I love. Cotton candy I love I love I love candy biscuit. I love marzipan I love pie marshmallow gingerbread sesame snaps. Croissant pudding halvah sugar plum applicake candy I love sugar plum. Gingerbread
apple pie apple pie candy chocolate cake carrot cake jelly-o unerdwear.com. Chocolate sweet roll icing chupa chups brownie oat cake bonbon I love pie. Gummi bears cupcake pudding chocolate bar. Jujubes jelly-o sesame snaps toffee chocolate toffee. I love
toffee gingerbread marshmallow pie chocolate cake jelly beans. Biscuit jujubes jelly pudding gummies apple pie. Chupa chups I love chocolate cake unerdwear.com carrot cake I love sweet roll marshmallow.
<br/>
<br/>Cotton candy macaroon pudding croissant ice cream sesame snaps tiramisu. Unerdwear.com sweet roll candy I love. Tootsie roll soufflé lollipop chocolate cake soufflé. Jelly tootsie roll I love I love I love donut oat cake. Gummies croissant pastry
candy brownie ice cream. Wafer muffin icing. I love icing apple pie bonbon jelly I love jelly beans chupa chups. Candy bonbon carrot cake. Croissant I love candy canes pudding donut toffee. Cotton candy ice cream chupa chups candy canes muffin croissant
sesame snaps marshmallow. I love soufflé donut donut. Jelly beans bear claw sugar plum biscuit toffee gummi bears. Tiramisu lollipop applicake jujubes chocolate bar donut pudding chocolate bar bear claw.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Sinistrality

Underrated answer. For my use-case - Outer div style is position: fixed; bottom: 0%; top: 0%; overflow: scroll; height: 100vh; will make the outer div scroll-able based on content. – Fosterling

Great answer for those who have a top property different than 0. In those cases, the scrolling bar wouldn't reach the end of the content. – Lanky

Answer 3

Try this on your position:fixed element.

overflow-y: scroll;
max-height: 100%;

Roomy

Answer 4

You probably need an inner div. With css is:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Rolon

Answer 5

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:

Gunning

The use of paragraph elements isn't appropriate in tab labels. – Wept

Brilliant! Easy and fixes the issue. Thanks! – Involucre

Answer 6

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+

Spy

Answer 7

For your purpose, you can just use

position: absolute;
top: 0%;

and it still be resizable, scrollable and responsive.

Disincline

Answer 8

I'm presenting this as a workaround rather than a solution. This may not work all the time. I did it this way as I'm doing a very basic HTML page, for internal use, in a very bizarre environment. I know there are libraries like MaterializeCSS that can do really nice nav bars. (I was going to use them, but it didn't work with my environment.)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Gagliardi

Answer 9

To make a fixed position element scrollable, you should do the following:

1. Add a height to the fixed positioned element (e.g. height: 100%). You might also want to set a min-height: [some value].

2. Set overflow: scroll on the parent element.

This is how I solve this problem regularly in my own front-end work. I hope this helps you (whoever you are, future developer).

Manus

Answer 10

Add this to your code for fixed height and add one scroll.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Calices

max-height can't be auto developer.mozilla.org/en-US/docs/Web/CSS/max-height – Largeminded