Fixed positioned element issue

Question

<nav>
</nav>

<div class="container">
      <div class="wrapper row">
        <div class="col-md-3 col-lg-3 left-side">
        </div>
        <div class="col-md-6 col-lg-6 middle-side">
        </div> 
        <div class="col-md-3 col-lg-3 right-side">
        </div>
      </div>
    </div>
</div>

<footer>
</footer>

CSS code

.wrapper {
  width: 100%;
  height: auto;
  background-color: var(--main-bg2-color);
  margin-top: 55.6px !important;
}

.wrapper.row {
  margin: 0;
}

.left-side {
  width: 10%;
  background-color: var(--main-bg2-color);
  color: var(--main-text-color);
  height: auto;
  padding-top: 41px;
  padding-left: 0;
  position: fixed;
  overflow: hidden;
}

.middle-side {
  padding-top: 40px;
  width: 100%;
  background-color: var(--main-bg2-color);
  color: white;
  height: auto;
  overflow: hidden;
  margin-left: 14%;
}

.right-side {
  padding-top: 40px;
  padding-left: 20px;
  width: 100%;
  background-color: var(--main-bg2-color);
  height: auto;
  position: fixed;
  right: 0;
}

Here I have a container inside it the left-side class and right side class must remain fixed while the middle side class must be scrollable. My issue is that right side class is always on right with respect to the window when I give right:0. I want right-side class must be right:0 with respect to wrapper class Is there anyway to fix this?

Answer 1

If I get you right, you want the child div to be fixed to it's parent...

in order to do so you have to set the parent to be positioned fixed and then all its children to be positioned absolute.