可滚动div的CSS整页背景高度

Question

有html代码:

 <div class="container content">
 <div class="wrap-container row">
   <div class="col-xs-12 col-md-5 text-center text-white left">
     <h2 class="mt-5">Contact</h2>
      <h1> 987 123 456</h1>  
   </div>
   <div class="col-xs-12 col-md-6 ml-auto right">
     <div class="form">
        <form>
          <!-- form controls -->
        </form>
     </div>
   </div>       
 </div>
</div>

现在在 CSS 中

.content.container {
    height: 80vh;
    overflow: hidden;
    box-sizing: border-box;
}

.wrap-container {
    position: relative;
    height: 80%;
    border-radius: 5px;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    box-sizing: border-box;

}
.left {
    text-shadow: 0px 1px 2px #808080, 2px 2px 1px rgba(47,171,81, 0.8);
    font-family: Verdana, Geneva, Tahoma, sans-serif;


}
.right {
    background: rgba(0,0,0,.8);
    color: #b9b9b9;
    margin: 2rem;
    height: 86%;
    overflow: hidden;
    box-sizing: border-box;
}
.form {
    overflow: auto;
    height:99%;
    padding-right: 3rem;
    position: relative;
    width: 110%;
    left: 0;
    right: -2rem;
}
@media (max-width: 768px) { 
    .content.container {
        height: 200vh;
        display: block;
    }

    .wrap-container {
        display: block;
        height: auto;
        overflow: auto;

    }
    .cb-slideshow li div h3 {
        line-height: 0;
    }
    .right, .left {
        margin:0;
    }
    .right {
        height: auto;
    }
    .form {
        padding-right: 1.5rem;
        /*height: auto;*/
        display: block;
    }
 }

现在，当 .form div 高于垂直高度 (100vh) 时，内容将被剪切。在手机等小型设备中，我可以滚动 .form div 内容，但只有 vh 可见，没有可见的提交按钮:/我在 .content.container 的媒体查询高度 200vh 中添加了解决问题的方法，但我认为这不是正确的方法。

我应该如何将可滚动的 div 扩展到它的内容高度？

Answer 1

child 适应 parent 高度的问题最好使用 flexbox 来解决。

我已将 wrap-container 设置为 flex 和 flex-direction:column ，因为子项是堆叠的。我会尽量避免为所有 child 设置不同的高度。

然后只需将 overflow-y:scroll 添加到表单即可。

.wrap-container {
display: flex;
flex-direction: column;
}
.form {
overflow-y: scroll;
}

如果你想达到这样的效果:主容器和 overflow:hidden 中的元素为 100vh，但 .form 可滚动，对于所有设备，应该这样做:

Fiddle