Vibrating scrollbar in nested lists

[ghost]

I have this problem with my list actually this is my render funct:

<div style={{ height: '100%', overflow: 'hidden' }}>
              {(budget && budget.length && !fetching) && (
                <VirtualList
                  itemCount={budget.length}
                  height={height //this belong to clientHeight}
                  renderItem={this.renderChild(null)}
                  itemSize={(index => heights[index] || 24)}
                />
              )}
</div>

and this is renderChild:

<Collapse style={{ height: 200, overflowY: 'auto' }} isOpen={toggles[realId]}>
          {(toggles[realId] && nextData) && (
            <div>
              <VirtualList
                itemCount={nextData.length}
                height={200}
                renderItem={this.renderBudget(nextData)}
                itemSize={(index => heights[index] || 24)}
              />
            </div>
          )}
</Collapse>

well this is what happen when i scroll down the list of collapsable data:

[kole]

I am experience this as well. Nested lists on a kanban-style board with vertically scrolling lists inside a horizontally scrolling board (like Trello).

Anyone have any feedback on this issue?