Html Question posted in
Some basic documentation can be found here.

Html – Display Scroll Bars and have them function from flex box child item

The nav bar is small now but it will grow quite a bit. So, it’ll need scroll bars. However I don’t seem to be able to make them show up without forcing them with overflow: scroll; But even this doesn’t work as the scroll bars are non-functional.

I’ve tried adding overflow: hidden, clip, no-warp to various classes along with overflow: scroll to various parent elements.

The DOM was generated from a blazor app, pulled out the germane elements and styles. The result shows the problem I’m having. I added the borders to make sure the various elements where taking up the whole view port.

UPDATED WITH ANSWER: see css comment ‘magic happens here’.
In order for the scroll bar to show up as expected there needs to be some sort of height that fixes the length of the nav bar.

body {
  padding: 0;
  margin: 0;
  font: bold 16px Garamond, serif;
  background: black;
  color: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  flex: 1 1 100%;
  border: solid 1px red;
}

.navbar {
  flex: 0 0;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  white-space: nowrap;
  padding: 0;
  color: grey;
/* magic happens here */
  height: 100%;
  overflow: auto;
/* magic happens here */
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}
<html lang="en">
  <head>
  </head>
  <body>
<div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Home Sweet Home</li>
        <li >Adventure Log</li>
        <li >Rules</li>
        <li >Maps</li>
        <li >Characters</li>
      </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
    <div>Welcome to your new app.</div>
  </div>
</div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Basically you need to add a height to the nav element so it appears. I guess your height would be 100vh. Then the scrollbar will appear once the items will overflow.

    body {
  padding: 0;
  margin: 0;
  font: bold 16px Garamond, serif;
  background: black;
  color: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  flex: 1 1 100%;
  border: solid 1px red;
}

.navbar {
  flex: 0 0;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  white-space: nowrap;
  padding: 0;
  color: grey;
  /* I added the following four lines */
  height: 10vh; 
  overflow-y: auto;
  overflow-x: hidden;
  background: red;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
    <html lang="en">
  <head>
  </head>
  <body>
<div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Home Sweet Home</li>
        <li >Adventure Log</li>
        <li >Rules</li>
        <li >Maps</li>
        <li >Characters</li>
      </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
    <div>Welcome to your new app.</div>
  </div>
</div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    You can use the scrollbar when the items overflow

    .wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  width:60%;
  border: solid 1px;
}

.navbar {
width:300px;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  color: grey;
  height: 100px; 
    overflow:scroll;
  
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
    <div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Menu 1</li>
        <li >Menu 2</li>
        <li >Menu 3</li>
        <li >Menu 4</li>
        <li >Menu 5</li>
        <li >Menu 6</li>
        <li >Menu 7</li>
        </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search