CSS overflow-y: auto does not work, but I don't know why

Question

I put overflow-y: auto in my body tag css.

What I expect is that

1. if contents exceed
   • scroll is generated
   • If I scroll it down, I can see my last content

But in my code, this doesn't work. Scroll is generated, but something went wrong.

Below is my image. There has to be five 'defg', but only three 'defg' are shown.

html {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: inline-block;
  height: inherit;
  overflow-y: auto;
  padding-left: 10%;
  padding-right: 10%;
}

.leftnav {
  position: fixed;
  height: 100%;
  width: 8.5%;
  background-color: #d1d4e3;
}

.content {
  position: fixed;
  left: 20%;
}

.search {
  display: grid;
  grid-template-columns: 10fr 1fr;
  ;
}

.realcontent {
  font-size: 200px;
  font-weight: bold;
}

<div class='leftnav'>
  ABC
</div>
<div class='content'>
  <div class='search'>
    <input type='text' placeholder="TEST1">
    <img src='../static/images/search.png'>
  </div>
  <div class='realcontent'>
    defg<br> defg
    <br> defg
    <br> defg
    <br> defg
    <br>
  </div>
</div>

Is there any problem in here?

Answer 1

The overflow does not work because of your position: fixed on the content. Position: fixed does not relate to its parent, so it is like the body has nothing overflowing.

You could set the #content to position: absolute;

html {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: inline-block;
  height: inherit;
  padding-left: 10%;
  padding-right: 10%;
}

.leftnav {
  position: fixed;
  height: 100%;
  width: 8.5%;
  background-color: #d1d4e3;
}

.content {
  position: absolute;
  left: 20%;
}

.search {
  display: grid;
  grid-template-columns: 10fr 1fr;
  ;
}

.realcontent {
  font-size: 200px;
  font-weight: bold;
}

<div class='leftnav'>
  ABC
</div>
<div class='content'>
  <div class='search'>
    <input type='text' placeholder="TEST1">
    <img src='../static/images/search.png'>
  </div>
  <div class='realcontent'>
    defg<br> defg
    <br> defg
    <br> defg
    <br> defg
    <br>
  </div>
</div>