'HTML/CSS style for having on fixed navbar two fixed sidebars and scrollable content with scrollbar at right of screen

.navbar {
  height: 10%;
  width: 100%;
  background: rgb(51, 204, 51);
  position: fixed;
  z-index: 999;
}

.dashboard {
  display: flex;
  top: 10%;
  height: 90%;
  width: 100%;
  position: fixed;
}

.sidebar {
  border-right: 1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
}

.content {
  overflow-y: auto;
  flex: 5;
}

.data {
  font-size: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="app.css" />
</head>

<body>
  <div class="navbar">navbar</div>
  <div class="dashboard">
    <div class="sidebar">sidebar</div>
    <div class="content">
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
    </div>
    <div class="sidebar">sidebar</div>
  </div>
</body>

</html>

Result

Result

The scrollbar is present in the middle of the screen. But I want to scrollbar to the extreme right. I want to implement the same using flexbox. I tried multiple steps but couldn't get the desired result. Pls help me with the issue.

htmlcssflexboxscrollbarsidebar


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions