想要实现布局效果，红区高度固定可滑动可收起。红区引用绿区组件。

一般会想到如下方案，红区样式：

width：200px;
height: 100%;
overflow-y: auto;
overflow-x: visible;

 但是效果并不好，绿区直接隐藏了

 

最终采用布局方案

        红区width: 200px;height: 100%;overflow-y: auto;overflow-x: visible;黑区width: auto;height: 100%;overflow: hidden;display: flex;flex-direction: row;

createPortal 红绿区数据流动不受影响 

createPortal(<div>绿区</div>,document.querySelector('黄区'))