如何让HTML/Body/Root高度自适应动态生成内容？

我有从数据库动态生成的内容（类似电商商品展示），但无法让#root元素高度完全包裹所有内容。页面加载后，#root仅延伸至可视屏幕底部，滚动后可见实际加载的内容长度约为4720px，远超出根元素高度。推测可能是内容加载晚于根元素加载导致。

当前样式代码 #

HTML/Body/#Root 样式：

body {
  margin: 0;
  display: flex;
  place-items: center;
  width: 100%;
}

html{
  width: 100vw;
}

html, body, #root{
  height: 100vh;
  margin: 0;
  padding: 0;
}

商品容器模板样式（Stylus语法）：

fsWrap
    // display: flex
    width: 100%

.fsCont
    display: flex
    height: 100%
    width: 100%
    flex-direction: column

.mnPL
    display: flex
    height: 100%
    width: 100%
    
.mnSub
    width: 100%
    display: flex
    height: 100%
    flex-direction: row

.sbWrap
    background-color: $theme-color-white
    display: flex
    width: 12rem
    border-right: 1px
    border-right-color: rgb(212, 212, 212)
    border-style: solid
    @media (max-width: 600px)
        display: none

.sbCont
    display: flex
    flex-direction: column
    padding: 2rem 1rem
    width: 100%

问题根源与修复方案 #

• 核心问题：你给html、body、#root设置了height: 100vh，这会强制它们的高度固定为当前视口高度，就算内部内容超出也不会自动扩展，和内容加载顺序无关，是样式本身的限制。
• 具体修复步骤：
  1. 修改根元素高度规则，把固定高度改成最小高度：

     html, body, #root{
       min-height: 100vh;
       margin: 0;
       padding: 0;
     }
     

     这样元素既能保证至少占满屏幕高度，又能在内容变长时自动延伸。
  2. 移除body里的place-items: center，这个flex属性会让#root垂直居中，内容超出视口时会导致布局错乱。如果需要初始居中效果，给内部内容容器设置即可。
  3. 调整商品容器的高度设置，把所有height: 100%改成min-height: 100%，或者直接删掉height: 100%，让容器高度由内容决定：

     .fsCont
         display: flex
         min-height: 100%
         width: 100%
         flex-direction: column
     
     .mnPL
         display: flex
         min-height: 100%
         width: 100%
         
     .mnSub
         width: 100%
         display: flex
         min-height: 100%
         flex-direction: row
     

内容的提问来源于stack exchange，提问作者spencer