Background stops when scrolling down

[LuComic]

Body

Hi, I have a problem that when i scroll in my side panel the text continues but the dark blue background just stops, how do I fix that?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  place-items: center;
  font: normal 1em/1.4 system-ui;
  background: #cac8ff;
}

body {
  margin: 0;
  font: normal 1em/1.4 system-ui;
  line-height: 1.5;
}

.wrapper {
  display: flex;
  height: 100vh;
}

.main {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}

.side-panel-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #151426;
  border: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  cursor: pointer;
}

.side-panel-toggle:hover {
  background: #7372b3;
}

.side-panel {
  width: 450px;
  background-color: #151426;
  transition: width 0.5s ease;
  padding: 20px;
}

.side-panel-expanded {
  width: 45%; /* Expanded width */
  flex-shrink: 0;
  padding: 20px;
  background-color: #151426;
}

.side-panel-open .side-panel {
  display: initial;
}

.side-panel-open .sp-icon-open {
  display: none !important;
}

.side-panel-open .sp-icon-close {
  display: initial !important;
}

.other-stuff-container {
  margin-left: 20px;
  margin-right: auto;
}

.other-stuff-container h3, p {
  color: white;
}

.description {
  margin-bottom: 15px;
}

Guidelines

• I have read and understood this category's guidelines before making this post.

[sajadh76]

Hi @LuComic

If the text inside your side panel is longer than the height of the side panel itself, it will overflow and continue scrolling while the background remains fixed.

To solve this issue, you can make the background of the side panel extend along with the content.

here we go:

.side-panel {
background-color: #151426;
transition: width 0.5s ease;
padding: 20px;
overflow-y: auto; /* Add overflow-y property to enable scrolling */
}

.side-panel-expanded {
width: 45%; /* Expanded width */
flex-shrink: 0;
padding: 20px;
}

/* Adjust the background color to fill the entire height of the side panel */
.side-panel-content {
background-color: #151426;
}

Also, in your HTML structure, wrap the content of your side panel with a container div with the class side-panel-content:

Hope it solves your issue.

[LuComic]

Thanks! That solved it

[ebndev]

@sajadh76 - thanks for all of your participation in Discussions lately! Glad to see you interacting with different posts.

Happy you got your problem fixed @LuComic 😄

[sajadh76]

Thank you for your reply @ebndev :) My pleasure!