fixed布局时内容超出不滚动

前言

今天发现个问题，一个使用了position:fixed属性的元素，当它的内容超过屏幕高度的时候，超出的内容就看不到也无法滚动。。
就像下图这样：

解决

既然不滚动就加上overflow-y: scroll; overflow-x: hidden; 这些属性就好了，简单吧。。

But

但是发现右边展开收起的定位元素被隐藏掉了，以前只知道hidden会隐藏掉，没想到其它属性也会（孤陋寡闻了😅。。）

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

表现如图（盗用MDN上的一张图）：

So

怎么改呢，尝试了一些办法，左侧整个div元素且叫A，在A的内部添加一个div（且叫B），并在B元素加上overflow-y: scroll; overflow-x: hidden;这些属性，B元素与展开收起的元素（且叫C）并列，再根据原来的样式修改一下C元素的定位就好了。