Per the MDN docs for the overflow
property:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
This seems to border on useless (the prime scenario for the overflow-x
and -y
properties seems that it would be to set them to opposing values, no?) and necessitates hacks or wrappers. However it's not a new complaint, so I won't belabor the point.
This seems to be the best solution I've managed to find and is the one that I've settled for. At this point, I've given up on the "elegant" solution I'd like to have and am just curious to see if a solution even exists.
Is it possible to have a grid
based sidebar+content set up without using position: fixed
and setting a fixed width on the sidebar?
Here is a fiddle demonstrating the issue. The main goal here is to allow the sidebar contents to scroll on a short viewport while also adhering to the min-content
of the grid-template-columns
layout.