Re-title: fixed div columns and remaining width

Question

I'm trying to create a 5 column layout where all columns are the full height of the browser window.

Except for the middle column, the other columns should be fixed and not move when the browser/document is scrolled.

The middle column will contain the website content and will overflow vertically, so it should scroll like normal in the browser.

Besides that, all columns except the middle column have a fixed width and I need the middle column to occupy the remaining space (100% width of the parent element)

One requirement is not to use flexbox or css-grid.

The code below is what I got. Adding column "c" even messes up the full height of all columns and adds top/bottom margins. I'm lost here and would really appreciate some help.

*{
margin:0;
padding:0;
}
body,html{
    height:100%;
}
.parent{
  height:100%;
  width:100%;
}
.parent,.a,.b,.c,.d,.e{
    display:inline-block;
  height:100%;
}

.a{
    background-color:#99a4fa;
  width:10%;
}
.b{
    background-color:#5b6cfa;
  width:100px;
}
.c{
    background-color:#3847b8;
  width:20%; /* this should be remaining, not 20% */
}
.d{
    background-color:#1a299c;
  width:100px;
}
.e{
    background-color:#0d1c8d;
  width:10%;
}

<div class="parent">
  <div class="a">
    a<br/>locked
  </div>
  <div class="b">
    b<br/>locked
  </div>
  <div class="c">
    remaining width
    <br/>
    so all cols take up 100% width
    <Br/>
    of parent
    <br/><br/>
    only div that should scroll vertically with the page
  </div>
  <div class="d">
    d<br/>locked
  </div>
  <div class="e">
    e<br/>locked
  </div>
</div>

Answer 1

i use position sticky and make the middle column flow with scroll

*{
margin:0;
padding:0;
}
body,html{
    height:100%;
}
.parent{
  height:100%;
  width:100%;
}
.parent,.a,.b,.c,.d,.e{
    display:inline-block;
  height:100%;
}

.a{
    background-color:#99a4fa;
  width:10%;
}
.b{
    background-color:#5b6cfa;
  width:100px;
}
.c{
    background-color:#3847b8;
  width:20%; /* this should be remaining, not 20% */
   position: sticky;
    top: 0px;
    height:auto;
}
.d{
    background-color:#1a299c;
  width:100px;
}
.e{
    background-color:#0d1c8d;
  width:10%;
}

<div class="parent">
  <div class="a">
    a<br/>locked
  </div>
  <div class="b">
    b<br/>locked
  </div>
  <div class="c">
    remaining width
    <br/>
    so all cols take up 100% width
    <Br/>
    of parent
    <br/><br/>
    only div that should scroll vertically with the page
  </div>
  <div class="d">
    d<br/>locked
  </div>
  <div class="e">
    e<br/>locked
  </div>
</div>

want