Relative positioned div inside of fixed parent

Question

I need relative positioned div inside of fixed parent.

I have a website where everything is relative exept fixed popup window which opens on a button click. This popup window should be 100% width and 100% height, so it covers whole page.

Inside popup window I want fixed div on left side which is 60% width, and relative div on right side (40% width, auto height) which is available to scroll.

In fact, it's hard to explain so I made the fiddle. In this example, I want to scroll orange div instead of scrolling blue div. Is it possible to change scrollbar focus?

<div id='container'>
  <div id='inside-fixed-div'>
    <div id='left-fixed-container'></div>
    <div id='right-relative-container'>
    </div>
  </div>
</div>

https://jsfiddle.net/87x8dwn6/

Answer 1

To remove the scroll on the blue, I needed to remove the 1200px height set on the #container and replace that value with 100%. The 100% height won't work unless the parent is also 100% height. Because of this, the parents needing this 100% height would be the document root and body.

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

#container{
  ...
  height: 100%;
}

In addition, I set overflow to auto and height to 100% on #right-relative-container .

#right-relative-container{
  ...
  height: 100%;
  overflow: auto;
  ...
}

Result (quality of gif isn't great — apologies)

Demo http://codepen.io/antibland/pen/eZjxom