I've been encountering a persistent issue with this particular CSS problem where the overflowing content does not display the expected padding. To illustrate, take a look at this image:
https://i.sstatic.net/056IH.png
The challenge lies in setting padding for the internal container that overflows, yet somehow this padding doesn't carry over to the hidden area. Once you scroll to the end of the container, you'll notice the absence of padding.
Upon further investigation, I've identified the root cause as the internal container failing to expand completely within the overflow zone. To help clarify, I've prepared a fiddle.
function toggleCollapseMenu() {
document.getElementById("mainMenu").classList.toggle("uncollapsed");
}Upon expanding the menu to full-screen using the collapse button, the lack of vertical padding becomes evident at the bottom of the overflowing document.
For more reference, feel free to check out this alternate fiddle: http://jsfiddle.net/vkrs38qt/9/
In attempting to address this issue, I've tested adding the following code snippet to the overflown content (menu-container):
min-width: 100%;
width: 100%;
margin: auto;
Despite my usual approach in similar cases, this adjustment had no impact on the container in my current scenario. In essence, I'm seeking guidance on how to apply padding consistently across overflowing content—both vertically and horizontally—from start to finish :)
If my explanation seems unclear, let's hope the provided code snippets and images can convey the situation effectively.