如何使用纯CSS在另一个div内部创建一个响应式可滚动div

Question

我的网页看起来像

我的目标是使外垫的高度适合视口高度，并使内部清单可滚动。我试过了

.html{
    height: 100%;
}  

.pad{
    height: 100%;
    overflow: hidden;
}

.list{
    height: 100%;
    overflow-y: auto;
}

小提琴：https://jsfiddle.net/chandannadig/esmrLzuv/10/

瞬间滚动条可见，数据被向左推，我用来获得折叠效果的伪元素被搞砸了。我想实现以下目标：

1. 制作＆＃39; .list＆＃39;可滚动而不显示滚动条
2. 滚动条不应影响伪元素
3. 设计应该响应

请帮我实现这个目标

Answer 1

我已经更新了你的小提琴（html看起来与上面给出的截图不同，但是我尽力为你提供解决方案）。

我添加了

.content {
  overflow: scroll;
  width: calc(100% + 20px);
  height:100%;
}

它解决了目的列表是可滚动的calc（100％+ 20px）为滚动条添加了额外的空间，它也是响应式的。