CSS: how to get scrollbars for div inside container of fixed height

css scrollbar overflow

342,838

Solution 1

setting the overflow should take care of it, but you need to set the height of Content also. If the height attribute is not set, the div will grow vertically as tall as it needs to, and scrollbars wont be needed.

See Example: http://jsfiddle.net/ftkbL/1/

Solution 2

FWIW, here is my approach = a simple one that works for me:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

Solution 3

Code from the above answer by Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

Solution 4

This is a great question because the answer is not immediately obvious, for such a simple task. The problem has hit me several times over the years, and It seems I always have to think about it before I get it right.

Below is my solution which uses (only) two CSS-classes, 'innerDiv' and 'outerDiv'.

<div id="outerDiv">
  <div id="innerDiv">
     A <p> B <p> C <p> D <p>
  </div>
</div>

<style>
    #outerDiv
    { height : 200px;
      margin : 44px; border: solid 4px Red;
    }

    #innerDiv
    { height     : 80%;
      overflow-y : auto;
      border     : solid 4px Green; font-size: 300%;
    }
</style>

Why does that work, and why do I say the answer is "not immediately obvious"?

In the example above both the outerDiv and innerDiv have fixed height because we set the height: -property for both of them.

We have the innerDiv height less than the height of the outerDiv. Therefore innerDiv "fits" into the outer-div and therefore the outer div should not get a scrollbar, right? Yes except if the innerDiv has so much content that it does not fit into the fixed height of the innerDiv but overflows. Therefore the question is how can we prevent the inner div from "overflowing"?

The way to prevent the innerDiv from overflowing is to give it the attribute "overflow: auto", or "overflow-y: auto" if we just want to prevent vertical overflow.

The reason the solution is "not immediately obvious" is this: The default value of 'overflow' is NOT 'auto', but 'visible'.

One might (erroneously) assume that the default value of overflow is "auto", because then everything should be auto-matically taken care of, right? Not so fast, the default of overflow is 'visible', NOT 'auto'.

So if you remove the "overflow-y:auto" from the example above there will be no scrollbars. If you remove it but add it to the outerDiv, the outer div will have the scrollbar, which is NOT what we want. If you have it in both then only innerDiv will have it.

Solution 5

HTML

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
  overflow-y: scroll;
}

/*SCROLLBAR MODIFICATIONS*/

.FixedHeightContainer::-webkit-scrollbar {
    width: 8px;
}

.FixedHeightContainer::-webkit-scrollbar-thumb {
    background: #909090;
    border-radius: 8px;
}
.FixedHeightContainer::-webkit-scrollbar-track {
    background: #FFFFFF;
}

View more solutions

342,838

Author by

David

Updated on January 31, 2022

Comments

David over 2 years
I have the following markup:
```
<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>
```
The CSS looks like this:
```
.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}
```
Due to its content, the height of div.Content is typically greater than the space provided by div.FixedHeightContainer. At the moment, div.Content merrily extends out of the bottom of div.FixedHeightContainer - not at all what I want.

How do I specify that div.Content gets scrollbars (preferably vertical only, but I'm not fussy) when its height is too great to fit?

overflow:auto and overflow:scroll are doing nothing, for some bizarre reason.
David over 13 years

Okay - thanks. So I need to specify a height for div.Content? I assumed it would work out from the container that it wouldn't fit, and apply scrollbars on that basis.
RoToRa over 13 years

If you give Content a fixed height, you shouldn't give FixedHeightContainer a fixed height, because you can't know how high your title will be, so Content may be pushed out. See: jsfiddle.net/ftkbL/2 You should set the fixed height only on the element with overflow: scroll. See jsfiddle.net/ftkbL/3 or jsfiddle.net/ftkbL/4
David over 13 years

I see your point (from the first link) but the title text is known and is too short to break over a line unless the user inflated the text to an impractical size.
klewis about 10 years

Is there a way to have a short height and hide the scroll-bar at the same time? this way when users drag down on mobile devices, they will see that they are scrolling down, but without the cumbersome of seeing 2 scroll-bars on their browser?
Dutchie432 about 10 years

@blackhawk - Not that I know of. You may need to use Javascript for this. Specifically I am thinking of the jQuery Draggable library: jqueryui.com/draggable -one thing to consider is... how will desktop users know to scroll?
klewis about 10 years

Thanks @Dutchie432. I will use CSS media queries to display this feature only on small width devices, then on desktop sizes, show it differently.
always-a-learner almost 7 years

height: auto; not working in this case. any suggestions?
Dutchie432 almost 7 years

The height has to be hard-coded to a numeric value. If you specify "height:auto" the container should grow in height to fit the content, thus eliminating the need for scrollbars in the first place.