CSS overflow-y: auto 不起作用，但我不知道为什么

Question

我把 overflow-y: auto 放在我的正文标签中 css.

我期望的是

如果内容超过
- 卷轴生成
- 如果我向下滚动，我可以看到我最后的内容

但在我的代码中，这不起作用。滚动已生成，但出现问题。

下面是我的图片。必须有五个 'defg'，但只显示三个 'defg'。

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>

这里有什么问题吗？

Answer 1

溢出不起作用，因为您的位置：固定在内容上。 Position: fixed 与其parent没有关系，就好像body没有溢出一样

您可以将#content 设置为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>

CSS overflow-y: auto 不起作用，但我不知道为什么

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

html

javascript

css

overflow