小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办

项目场景：

**做一个小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面**

---

问题描述：

我只能设置scroll-view的高度，不然不显示二级菜单
这是html代码

<view class="navbar-top">
    <scroll-view scroll-x class="top-navbar" style="height:{{offsetheight}}">
        <view class="navbar" style="background: {{ itemStyle.background }};"> 
            <view class="item" wx:for="{{dataList}}" wx:key="unique" data-id="{{ item.navigation_id }}" data-index="{{index}}" data-url='{{item.link_url}}' data-child="{{item.child}}" bindtap="selectNav" data-hidden = "{{item.hidden}}" >
                <text class="item item-text {{curNav==item.navigation_id ? 'active' : ''}}" style="color: {{ curNav==item.navigation_id ? itemStyle.selectColor : itemStyle.color }};border-bottom: 3px solid {{ curNav==item.navigation_id && hidden == true? itemStyle.selectColor : 'none' }}">{{item.name}}</text>
                <view style="position:relative" >
                    <view class="two-list {{curIndex>3?'kaoyou':''}}" id='theid' hidden="{{curIndex!==index}}" style="grid-template-columns:{{gridtemplatecolumns}}; display:{{curIndex == index ? 'grid' : 'none'}};background: {{ itemStyle.background }};border: 1px solid {{ itemStyle.background }};" wx:if="{{hidden}}">
                        <text wx:for="{{item.child}}" wx:for-item="twotab" wx:key="index" catchtap='navigationTo' data-url='{{ twotab.link_url}}'  class="list-details item-text" style="color:{{itemStyle.color}}">{{twotab.name}}</text>
                        <view class=" {{curIndex>2?'t-right':'top-t'}}" style="width: 0;height: 0;border-bottom: 8rpx solid {{ itemStyle.background }};border-right: 8rpx solid transparent;border-left: 8rpx solid transparent;"></view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</view>

page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.top-navbar {
    height: 400rpx;
    overflow-y: hidden;
    overflow-x: auto;
    /* background-color: #f4f4f4; */
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.navbar-top {
    position: fixed;
    top: 102rpx;
    /* z-index: 100; */
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.navbar {
    display: flex;
    padding: 0 25rpx;
    background-color: #f4f4f4;
}

.navbar .item {
    background-color: #f4f4f4 !important;
}

.navbar .item>.item-text {
    display: block;
    text-align: center;
    padding: 0 25rpx;
    line-height: 72rpx;
    font-size: 30rpx;
    color: #999;
    position: relative;
}

.navbar .item>.text.active {
    color: #333;
}

.two-list {
    margin-top: 14rpx;
    margin-left: 15rpx;
    border: 1px solid #b998d1 !important;
    border-radius: 6rpx;
    padding: 0 12rpx;
    background-color: #f4f4f4 !important;
    position: absolute;
    top: 0;
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 50% 50%;
}

.two-list.kaoyou {
    position: absolute;
    right: 0;
}

.two-list .top-t {
    position: absolute;
    background-size: 20rpx;
    top: -7rpx;
    left: 44rpx;
    transform: translateX(50%);
    width: 20rpx;
    height: 10rpx;
}

.two-list .t-right {
    position: absolute;
    background-size: 20rpx;
    top: -7rpx;
    right: 44rpx;
    transform: translateX(50%);
    width: 20rpx;
    height: 10rpx;
}

.hide {
    display: none;
}

.block {
    display: block;
}

.two-list .list-details {
    padding: 21rpx 30rpx;
    font-size: 26rpx;
    color: #87699d;
    line-height: 30rpx;
    display: inline-block;
    margin: 0 auto;
    /* margin-right: 20rpx; */
}

/* 第三次更改添加 */

.father {
    display: inline-block;
    height: 65rpx;
    line-height: 65rpx;
}

.twolist-scroll {
    position: fixed;
    top: 175rpx;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    border: 1rpx solid #000;
}

.two-list-item {
    position: relative !important;
    display: inline-block;
    margin-top: 14rpx;
    margin-left: 15rpx;
    border: 1px solid #b998d1 !important;
    border-radius: 6rpx;
    padding: 0 12rpx;
    background-color: #f4f4f4 !important;
    max-width: 680rpx;
    vertical-align: top;
}
.list-details {
    padding: 21rpx 30rpx;
    font-size: 26rpx;
    color: #87699d;
    line-height: 30rpx;
    display: inline-block;
    margin: 0 auto;
    float:left;
    /* margin-right: 20rpx; */
}

---

原因分析：

问题还没解决，因为导航要在最上层，设置高度就会遮盖底部操作，

---

解决方案：请求支援，未解决