Vertical scroll not working at the size of the screen-CodePudding

I'm trying to achieve a scroll of users inside a flexbox menu. I've realized something strange when I'm setting to my nav a height of px's(like 100px for instance) it'll work just fine, but when I'm setting a 100% height, it'll create a global scroll if there's not enough space, and my menu won't fit the size of the screen. I've created two code-pens about the issue:

100% height for nav(scroll's not working)-

https://codepen.io/Shalev1104/pen/oNGYGgX

height with px(working scroll)-

https://codepen.io/Shalev1104/pen/KKXNXdB

*the only difference between them is the height property inside my <nav>.

In case you didn't understand, I need a vertical menu of 100% of the screen that has a vertical scroll inside of all the available spaces.

Glad for your help

CodePudding user response：

Percentages are relative measurements (as in 100% of ...what?). Make sure every parent element above the nav also has a height defined.

For example, if your site is structured like:

<html>
  <body>
    <ul >...</ul>
  </body>
</html>

Then the following CSS will likely sort your problem:

html, body, ul.nav { height: 100%; }

Edit: Here's an updated and cleaned version (both HTML and CSS):

<html>
  <body>
    <ul >
      <li >
        <div >
          <input type="search"  placeholder="Search Chat" />
          <button  type="button">Search</button>
        </div>
      </li>
      <li >
        <nav>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
          <li>d</li>
        </nav>
      </li>
      <li >
        <div >
          <div>
            <img src="https://www.jquery-az.com/html/images/banana.jpg"  width="50" height="50" alt="profile" />
            <span >User 1</span>
          </div>
          <button >&nbsp;Disconnect</button>
        </div>
      </li>
    </ul>
    <main>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>content on the page....</p>
      <p>Test</p>
    </main>
  </body>
</html>

html, body {
  margin: 0; padding: 0;
  height: 100%;
}
body {
  display: flex;
  flex-flow: row nowrap;
  width: 100%:
  background-color: red;
}
main {
  flex: 1 0 0;
  overflow-y: scroll;
}
.sidebar {
  margin: 0 20px 0 0; padding: 0;
  list-style-type: none;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 auto;
  background-color: red;
}
.sidebar-top {
  margin: 0; padding: 5px;
  flex: 0 0 auto;
  background-color: green;
}
.sidebar-middle {
  margin: 0; padding: 5px;
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: yellow;
}
.sidebar-middle nav {
}
.sidebar-middle nav > li {
}
.sidebar-bottom {
  margin: 0; padding: 5px;
  flex: 0 0 auto;
  background-color: blue;
}