Css 在元素中使用定义高度（vh）时，引导栅格、溢出滚动和响应布局存在问题

我正在尝试使用Boostrap 4创建一个两列布局，当我设置父容器的高度时，它使用一个溢出滚动

以下是小提琴的链接：

我遇到的问题是，为

.section

使用设置的高度实际上并没有设置列的高度，并且溢出滚动无法正常工作

---

关于如何让这两列正常工作，左列有一个滚动条，用于显示超出父容器高度的溢出内容，有什么想法吗？

如果我没有答错的话。问题的出现是因为高度是如何设置的，以及在何处设置的。以下是所做的更改：

.section {
  clear: both;
  width: 100%;
  /* height: 75vh !important; */
  float: left;
}

.test{
  width:auto;
  height:75vh !important;
}