如何用css控制可伸缩元素的高度？

Question

元素是高度可变的

也就是一个可展开的panel

希望得到的效果是 收起时候高度是内容高度 展开时候高度是屏幕高度

我这样写css:

position: absolute;
    top: 0px;
    right: 0px;
    width: 30%;
    height: min-content;
    max-height: inherit;
    padding: 50px 25px 30px 0px;
    z-index: 9999;
    row-gap: 0px;
}

收起时候的高度的确是内容高度

但是展开以后 父元素高度也变大了 所以他也变大了 导致超过屏幕高度了

max-height设为100%也不行

如何解决？

Answer 1

暂时的做法是:
用js来判断伸缩面板的状态 改变height的值

 height: this.state.openPanels.length === 0 ? 'fit-content' : '100%'

Answer 2

https://jsbin.com/gupoxaweko/...,output
是这意思？？