固定div面板中y轴的css滚动条

Question

My html content is like following and I want to a fixed sidebar that has 100% height. And scrollbar y should be appear when content added in mainContent or Content .

<div class="mainContainer">
  <h2>Title</h2>
  <div class="Content">
      <div class="panel panel-success">
          <div class="panel-heading">
              My Panel-1
          </div>
          <div class="panel-body">
              blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
          </div>
      </div>
      <div class="panel panel-success">
          <div class="panel-heading">
              My Panel-2
          </div>
          <div class="panel-body">
              blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
          </div>
      </div>
  </div>
</div>

And my css is like this:

.mainContainer
{
    float:right;
    height: 100%;
    width:350px; 
    padding:3px; 
    background:#f00;
    overflow-y:auto;
    overflow-y:hidden;
}
.Content
{ 
    background:#fff;
}

Answer 1

Do the following changes to your styles:

remove

overflow-y: hidden

and add

overflow-y: scroll
position:fixed;

it will work for example check this jsfiddle.net/467fz6rp/1