I have successfully created a JS Fiddle that demonstrates exactly what I am looking for: http://jsfiddle.net/j7ay4qd8/5/
This Fiddle features two columns that can be scrolled separately, and different sections of the left column can be easily scrolled to using JavaScript without affecting the right column or the rest of the page.
However, the only way I was able to achieve this in the example is by setting a hardcoded height using px values for the two nav elements.
height:calc(100vh - 90px);
Unfortunately, this approach may not work consistently across different browsers, devices, and resolutions. It will also break if new elements are added or if the size of the navs changes.
What I truly wish for is for the #form element to automatically adjust its size to fill the remaining space in the viewport.
In my current setup, adding another element like an alert would cause the #content and #sidebar to extend beyond the viewport, resulting in a jumpy scrolling experience as the entire page moves after the #content div has been scrolled.
For illustration, here is an example with an alert causing jumpy scroll: http://jsfiddle.net/c4k9u0mr/
I came across this jsfiddle that discusses achieving a similar layout using flexbox: http://jsfiddle.net/7yLFL/
Despite my efforts with flexbox, I have not been successful in making it work as intended. The only way I can enable separate scrolling for #content and #guidelines is by assigning them fixed heights, which brings me back to the challenge of making those divs occupy 100% of the container div.
Here is my unsuccessful attempt utilizing flexbox (with a fixed height of 100px): http://jsfiddle.net/jh6d5ztq/
Is there a way to achieve the functionality of the first and second JS Fiddles without having to specify a fixed height using pixels?