container is not full size inside the overflown area therefore no padding is applied

Issue

I have been struggling with this CSS issue, when the overflown content would not have padding applied to it. I can summarize it in this picture:

basically I have set a padding for the internal container that overflows, but for some reason this padding is not propagated for the area that is hidden. After you have scrolled to the end of the container, you can see that no padding is present.

I have been able to pinpoint the problem to internal container not expanding fully inside the overflow zone.. It's a bit hard to explain it so I have prepared a fiddle.

   function toggleCollapseMenu() {
      document.getElementById("mainMenu").classList.toggle("uncollapsed");
    }

:root {
  --height: 150px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#collapseBtn {
  display: inline-block;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
  border: unset;
  
  width: 200px;
  height: 100px;
}

#collapseBtn:hover {
  background-color: gray;
}


.menu,
.content {
  width: 100%;
}

.menu {
  background-color: black;
  transition: height 0.8s ease-in;
  height: var(--height);
  overflow: hidden;
}

.content {
  background-color: burlywood;
  flex: 1;

  overflow: auto;
  margin: auto;
}

.menu-container {
  overflow-y: hidden;
  overflow-x: auto;

  height: 100%;
  width: 100%;

  height: var(--height);
  position: absolute;
  bottom: 0;

  -webkit-transition: height 0.2s ease-in;
  -moz-transition: height 0.2s ease-in;
  -o-transition: height 0.2s ease-in;
  transition: height 0.2s ease-in;
}

.menu-container ul {
  background-color: #587c34;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  
  min-width: 100%;
  width: 100%;
  margin: auto;
}

.menu-container ul li {
  min-width: var(--height);
  border: 1px solid white;

  box-sizing: border-box;

  height: 100%;
  max-height: var(--height);
}

.menu-container ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
}

.menu-container .nav-link-container {
  display: flex;
  flex-direction: column;
  background-color: #f55858;
  justify-content: center;
  text-align: center;
  align-items: center;

  height: 100%;

  justify-content: start;
}

.menu-container span.nav-link-icon {
  background-color: magenta;
  font-size: 60px;
}

.menu-container span.nav-link-text {
  background-color: lightseagreen;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;

  margin: auto;
}

.menu.uncollapsed .menu-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu.uncollapsed ul {
  flex-direction: row;
  align-content: start;
}

.menu.uncollapsed ul li {
  width: 100%;
  height: var(--height);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

 <div class="app">
      <div class="content">
        content
        <button id="collapseBtn" onclick="toggleCollapseMenu()">
          collapse
        </button>
      </div>
      <div id="mainMenu" class="menu">
        <div class="menu-container">
          <ul>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two</span>
                </div>
              </a>
            </li>

            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two three</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two three four</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

See how the green area (internal overflown content) suddenly ends in the middle of the screen. And at the end there is no padding applied because of it.

Same is when you expand the menu to full-screen (see collapse button) - then vertically there is no padding at the end of the overflown document.

Other fiddle: http://jsfiddle.net/vkrs38qt/9/

I have tried adding following code snippet to overflown content (menu-container):

  min-width: 100%;
  width: 100%;
  margin: auto;

Because that is what I usually do in such cases, but it has no effect on the container whatsoever in my current scenario. The long story short I would like to know how to apply padding to overflown content from the beginning till the end (both vertically and horizontally) :)

Sorry if the explanation is vague, hopefully the code and pictures will speak for themselves.

Solution

.menu-container ul inherits the overflow value from .menu-container, and so you need to override it.

.menu-container ul {
...
  overflow: auto;
...
}

Unfortunately, now your content gets covered up. Changing the z-Index works for the horizontal, but the vertical looks odd.

   function toggleCollapseMenu() {
      document.getElementById("mainMenu").classList.toggle("uncollapsed");
    }

:root {
  --height: 150px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#collapseBtn {
  display: inline-block;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
  border: unset;
  
  width: 80px;
  height: 40px;
}

#collapseBtn:hover {
  background-color: gray;
}


.menu,
.content {
  width: 100%;
}

.menu {
  background-color: black;
  transition: height 0.8s ease-in;
  height: var(--height);
  overflow: hidden;
}

.content {
  background-color: burlywood;
  flex: 1;
  overflow: auto;
  margin: auto;
}

.menu-container {
  overflow-y: hidden;
  overflow-x: auto;

  height: 100%;
  width: 100%;

  position: absolute;
  bottom: 0;

  -webkit-transition: height 0.2s ease-in;
  -moz-transition: height 0.2s ease-in;
  -o-transition: height 0.2s ease-in;
  transition: height 0.2s ease-in;
}

.menu-container ul {
  background-color: #587c34;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  overflow: auto;
  min-width: 100%;
  width: 100%;
  margin: auto;
}

.menu-container ul li {
  min-width: var(--height);
  border: 1px solid white;

  box-sizing: border-box;

  height: 100%;
  max-height: var(--height);
}

.menu-container ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
}

.menu-container .nav-link-container {
  display: flex;
  flex-direction: column;
  background-color: #f55858;
  justify-content: center;
  text-align: center;
  align-items: center;

  height: 100%;

  justify-content: start;
}

.menu-container span.nav-link-icon {
  background-color: magenta;
  font-size: 60px;
}

.menu-container span.nav-link-text {
  background-color: lightseagreen;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;

  margin: auto;
}

.menu.uncollapsed .menu-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu.uncollapsed ul {
  flex-direction: row;
  align-content: start;
}

.menu.uncollapsed ul li {
  width: 100%;
  height: var(--height);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

 <div class="app">
      <div class="content">
        content
        <button id="collapseBtn" onclick="toggleCollapseMenu()">
          collapse
        </button>
      </div>
      <div id="mainMenu" class="menu">
        <div class="menu-container">
          <ul>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two</span>
                </div>
              </a>
            </li>

            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two three</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-icon"><i class="fas fa-home"></i></span>
                  <span class="nav-link-text">One two three four</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
            <li>
              <a>
                <div class="nav-link-container">
                  <span class="nav-link-text">no icon</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

Answered By - JMP