Javascript 将div元素的高度锁定为其子元素的大小

基本上，我在

中有三个div。main

div显示为

flex

。我正在尝试进行基本的滑动以进入下一个/上一个div。我不知道如何根据当前子元素的

#wrapper

高度动态指定

.main

divs高度

const main=document.querySelector（'.main'）；
N=主、子、长度；
设i=0，
x0=零，
锁定=错误，
W
功能（e）{
返回e.changedTouches？e.changedTouches[0]：e
};
功能锁（e）{
x0=统一（e）.客户端x；
main.classList.toggle（'smooth'，！（locked=true））
};
函数拖动（e）{
e、 预防默认值（）；
如果（已锁定）
setProperty（'--tx'，`${Math.round（unified（e.clientX-x0）}px`）
};
功能移动（e）{
如果（已锁定）{
设dx=unified（e）.clientX-x0，
s=数学符号（dx），
f=+（s*dx/w）.toFixed（2）；
如果（（i>0|s<0）和（i0）和&f>0.2）{
main.style.setProperty（'--i'，i-=s）；
f=1-f
}
setProperty（'--tx'，0px'）；
main.style.setProperty（'--f'，f）；
main.classList.toggle（'smooth'，！（locked=false））；
x0=零
}
};
函数大小（）{
w=窗宽
};
大小（）；
main.style.setProperty（'--n'，n）；
addEventListener（'resize'，size，false）；
main.addEventListener（'mousedown'，lock，false）；
main.addEventListener（'touchstart'，lock，false）；
main.addEventListener（'mousemove'，drag，false）；
main.addEventListener（'touchmove'，drag，false）；
main.addEventListener（'mouseup'，move，false）；
main.addEventListener（'touchend'，move，false）
.main{
--n:1；
显示器：flex；
溢出y：隐藏；
宽度：100%；
宽度：计算值（var（-n）*100%）；
/*高度：50vw；最大高度：100vh*/
转换：转换（计算（var（-tx，0px）+var（-i，0）/var（-n）*-100%）；
}
#包装纸{
宽度：100%；
宽度：计算值（100%/var（--n））；
用户选择：无；
指针事件：无
}
.smooth{转换：转换计算（var（--f，1）*.3s）缓解}

第0页

洛雷姆·伊普斯姆·多洛·希特，一位杰出的职业经理人，他是一位临时劳工
等等，多洛尔·马格纳·阿利夸。我们的工作是最低限度的，我们的工作是在实验室里进行的
我是一个普通的消费者。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。除非圣奥卡塔特无过失，必须
这是我的错。

这里是第1页！！！
有些东西在这里！！！
您的问题有点不清楚。
wrapper
id（应该是类，而不是id）是设置为
display:flex
的
main
的子项。由于默认情况下使用的是
display:flex
，因此所有
wrappers
高度都将拉伸到相同的高度。因此您建议不要使用flex？为什么包装器必须是类而不是id？因为
id
在HTML页面中只能使用一次。