Css: How to Get Scrollbars for Div Inside Container of Fixed Height

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

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/

divs with scrollbars in div with fixed size

Using Jquery might help

<body>
<div style="height: 150px; width: 200px; background: green">
  <div id="c1" style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div id="c2"style="overflow: auto; background: red">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

in document.ready add this

 var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);

How to set size of div containing text so that can use the scroll bar feature

I think you should take a look at some of these solutions and see if one of them fits your case.

CSS: how to get scrollbars for div inside container of fixed height
OR
divs with scrollbars in div with fixed size

You should try changing the value of height in your styling to actual number instead of a percentage, and see if that has any effect on presentation. Solutions above have exact values for height and seem to work that way.

And here is a solution that deals with image in div specifically:

Scroll full image inside div

CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

As per my comments, here is my answer in bootply. I have added comments to the snippet below so you can see what the styles are doing

/* CSS used here will be applied after bootstrap.css */

html,

body {

  background-color: palette(dark-white);

  height:100%;

  width:100%;

  border:1px solid red;

  overflow-y:hidden;

}

.sidebar-left-test {

  width: 30%;

  border: 1px solid green;

  overflow-y: scroll;

}

.content {

  width: 70%;

  border: 1px solid black;

  overflow-y: scroll;

}

/* new styles */

.container-fluid {

  display: flex;          /* make outer container flex */

  flex-direction: column;  /* make md col 12 divs into 2 rows */

  flex-wrap: wrap;

  height: 100%;           /* make the height of the container 100% of the body if less than max height */

  max-height: 600px;      /* max height of the container */

}

.md-col-12 {

  width: 100%;            /* make sure these rows take up 100% width*/

}

#header {

  flex-grow: 0;   /* this is so that the header is as high as it's content */

}

#body {

  flex-grow: 1;   /* this makes the body take up the rest of the height inside the container */

  display: flex;  /* make this flex as well so we can get the two child divs to be 100% height */

  flex-direction: row;  /* make the child divs into columns */

}

#body > div,

#body > div > div {

  /* these make the child divs and their children grow to fill the height of the columns in the body */

  display: flex;  

  flex-grow: 1;

}

<div class="container-fluid">

  <div class="md-col-12" id="header">

    header

  </div>

  <div class="md-col-12" id="body">

    <!-- I have added this wrapping div for the body -->

    <div class="col-md-4">

      <div class="sidebar-left-test">

        md-4

        <br>md-4

        <br>md-4

        <br>md-4

        <br>

      </div>

    </div>

    <div class="col-md-8">

      <div class="content">

        content

      </div>

    </div>

  </div>

</div>

Scrollable div inside container without known height

Do the following:

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
}

.itemsHolder {
    height: 100%;
    overflow: auto;
    overflow-x:hidden;
    background: #ccc;
}

Demo

Div with scrollbar in fixed height page

When you absolutely position an element it comes out of the flow of the page. Please take a look at this fiddle. Note the green box causes two vertical scrollbars to appear.

http://jsfiddle.net/gX2DG/

To get a single scrollbar that only appears below the header, you will need to modify your CSS. This CSS works with fixed height headers only.

Zero out margin/padding on html/body and set overflow:hidden so that they do not trigger the main browser scrollbar
Set body to 100% height so that we can set 100% on divs inside of it
Absolutely position the child div that will contain the scrollable content. Then use left, right, top, bottom to stretch it to fill the screen.

http://jsfiddle.net/J4Ps4/

/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0;  }

/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 100%;
  overflow-y:auto;
  border: 1px solid green;
}

Fixed height scrollable div inside of a bootstrap 3 column

This answer is for when you dont know the window height.

You can still achieve this using position:absolute;
you just tell the blue and red parts to take top and bottom,
the green part should have top 100px, and then you just use css 'calc' to get its height.

Styles

.side{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  padding:0;
}

.scroll-area{
  width:100%;
  height:calc(100% - 200px);
  margin-top:100px;
  background-color:green;
  float:left;
  overflow-y:scroll;
}

html

<div class="row">
       <div class="col-md-2 col-xs-2 side">
          <div style="position:relative;width:100%;height:100%;">
            <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;">
                top
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                </ul>
                <div style="width:100%;height:10000px;">
                </div>
                <ul>
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;">
                bottom
            </div>
          </div>

       </div> 
       <div class="col-md-10 col-xs-offset-2 content col-md-offset-2">
         <div style="height:1000px;width:100%;">

         </div>
       </div>
  </div>

take a look at this filddle -

https://jsfiddle.net/jxo6pmju/12/

Css: How to Get Scrollbars for Div Inside Container of Fixed Height