css - how to get a panel within a set height parent wrapper to scroll not change the parent's height at the same time -

I am trying to determine the height of a child so that whatever extra comes is set to scroll the overflow But do not affect the parent's height;

- Updated url -

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "header" & gt; Header & lt; / Div & gt; & Lt; Div class = "menu" & gt; Menu & lt; / Div & gt; & Lt; Div class = "content" & gt; Kajs; This content is, it is flexible, should be dsfasdflkasjdfl fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj dsfasdflkasjdfl; Hinge; Fdlkasj dsfasdflkasjdfl; Kajs; Fdlkasj & lt; / Div & gt; & Lt; / Div & gt;  

CSS part:

 . Warper {boundary: 1 px solid black; Width: 200px; Height: 100 pixels; Overflow: scroll; / * This overflow is required: hidden; Scroll yellow (content instead) *.}. Header {background: green; }. Menu {background: red; }. Content {background: yellow; }  

So in this example, I am trying to scroll yellow part without affecting the height of the entire box at the same time. There is no calculation with javascript, fixed position

I tried to do this and I feel like I think you are looking for .

 . Warper {boundary: 1px solid black; Width: 200px; Height: 100 pixels; Hidden flurry; / * This overflow is required: hidden; Scroll yellow (content instead) *.}. Header {background: green; }. Menu {background: red; }. Content {background: yellow; Height: 100%; Overflow: scroll; }