Q:

Scroll Only the Child Eelement

I am trying to set scrolling only in child div. I have fixed height for the parent div with overflow-y: hidden; yet scroll taller the child div using overflow-y: scroll;.  
However, that shows a disabled scroll bar through the Y-Axis of the child div. How can I make it work using CSS only? If not, is there any jQuery way?
Here is the code I am using at the moment:  
<div class="parent">
    <div class="child">
        <!-- Content -->
    </div>
</div>

And, the CSS:  
.parent {
  display: block;
  height: 1000px;
  padding: 10px;
  overflow-y: hidden; /* So that the child doesn't break layout */
  width: 400px;
}
.child {
  border: 1px solid #AAAAAA;
  display: block;
  height: 1500px;
  padding: 5px;
  overflow-y: scroll; /* Make the child scroll */
  width: 100%;
}

A:

The issue is that the child doesn't have overflow. You are making the height 1500px, thus the parent has overflow because the child is 1500px tall. If you replace the height with height:100%, change overflow-y:scroll to overflow:auto, and add content to make it overflow it works properly just as you have it
Side notes:

For divs do not need to declare display:block because it is innate with the element type
You should use box-sizing: border-box on elements that have width or height 100% and that the parents have padding in order to make them take up 100% of the width or height minus the padding

