最近在一个前端项目中，需要实现div元素的高度随着其内部组件数量的变化，而增加高度的情况。具体来说就是，比如现在初始化状态下div的宽度为100%，高度为1000px，如果div里面的组件在增加，并且增加超过了1000px的高度，那么就将div高度修改为2000px，如果div内部组件在减少，并且小于了1000px，那么就将div高度从2000px减少为1000px。
根据这种需求，我们第一反应会想到使用原生的ResizeObserver，然而当我在使用ResizeObserver监听外层div高度变化的时候，出现了意想不到的情况，简单来说就是可以监听到div内部组件的增加而超过1000px的情况，此时div就变成了2000px；然而我将增加的组件删除后，div没有从2000px变回1000px。根据测试发现，组件在减少时，压根没有触发ResizeObserver。
经过研究，发现原因在于ResizeObserver监听的元素不能设置height或者min-height为固定的px，因为给height设置了固定的px之后，当内部组件减少时，div实际上高度是没有跟随着减小的，因此也就无法触发ResizeObserver了。
那么我们为了实现项目中div高度成倍增加或者减少的需求，只能在div内部套一个height属性为fit-content的div，然后通过ResizeObserver监听这个内部div的高度变化，然后再根据这个内部div的高度变化，来修改外部div的height属性成倍的增加或减少即可。
*该文章原创并发表于吱托邦网站，未经允许禁止转载！
