If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.

Keeping the scrollbox present at all times is the only way to keep the page from shifting. The page shifts when the scrollbox is introduced on long pages or a browser resize event that causes content to exceed 100% height.

Any ideas on how to fix these issues without causing more problems?

The cleanest way to do this is to just set the html as overflow-y:scroll Then if the content exceeds 100% height the scroller will appear in the already present scrollbox.