添加子项后，SCSS出现溢出

Question

我有一些无法正确诊断的问题。 将两个或多个孩子添加到我的＃inside-content溢出后，整个页面都会出现。 仅当孩子数等于或小于1时，页面才正确。 我不知道我错过了什么。

HTML：

<div id="page-content">
    <section id="inside-content">
      <div class="front-photo">
      </div>
      <div class="info">
          <div></div>
      </div>
      </section>
</div>

SCSS：

html,body{
  height:100vh;width:100vw;
  margin:0;padding:0;
}
#page-content{ // main container
  height:100vh;width:100vw;
  padding:0;margin:0;
  position:absolute;
}
#inside-content{
    height:100%;width:100%;
     .front-photo{
        height:100%;width:100%;
    }
    .info{
      height:200px;width:100%;
      background:blue;
      margin:0;padding:0;
      div {
        background:red;
        height:100px;width:100px;
      }
    }
}    

Answer 1

您将.front-foto类的高度设置为100％，这就是为什么它填充整个屏幕，然后当然必须滚动的原因。