I have two graphics displayed on either side of my page content. As the browser/page width decreases, these items get cropped off the screen to create more space for the content. While this setup is working fine,
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 960px;
}
There's an issue I've encountered - when the browser width goes below the defined min-width, the vertical scroll bar vanishes from the side of the page.
A CodePen demonstration of the problem can be found here: https://codepen.io/moy/pen/oemBEN
This happens because even though the body is within view, the .page element still abides by its set min-width property.
In order to address a previous issue, I placed the overflow settings on the .page element instead of the body. However, moving the following code to the body:
overflow-x: hidden;
overflow-y: auto;
Seems to work as intended. The side items are cropped appropriately and the vertical scroll bar remains visible in Chrome + Firefox (Mac). However, Safari (Mac) and IE (Windows) do not handle the cropping correctly.
If you resize the browser window and click on the background then drag right, you can reveal the messy cropped area of the page!
Is there a solution to this issue? Or should I accept that the vertical scroll bar will remain hidden?