我想我解决了这个问题。
https://codesandbox.io/s/vertical-list-forked-risye
您没有在rowRenderer中传递styles属性来虚拟化以正确的方式处理行。
此外，您的自动测瓣器未超过身高：0，因为它的父项没有任何样式。

如果任何人仍然在寻找一个工作原型的活动沙箱。这里是我回答并添加沙箱链接的帖子
react-beautiful-dnd doesn’t work properly with react-virtualized Table component

下面是我一起使用这两个库的方法。
CodeSandbox demo

import ReactDOM from 'react-dom'
import { List } from 'react-virtualized'
import React, { memo, useState, useEffect } from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

const padding = 10

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list)
  const [removed] = result.splice(startIndex, 1)
  result.splice(endIndex, 0, removed)
  return result
}

const ListItem = memo(props => {
  const {
    item,
    style,
    index,
    provided,
    isDragging
  } = props

  return (
    <div
      data-index={index}
      data-testid={item.id}
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      data-is-dragging={isDragging}
      style={{
        ...style,
        display: 'flex',
        padding: '0 10px',
        alignItems: 'center',
        boxSizing: 'border-box',
        marginBottom: `${padding}px`,
        ...provided.draggableProps.style,
        backgroundColor: props.isDragging ? '#ccc' : '#eee'
      }}
    >
      <div>{item.content}</div>
    </div>
  )
})

const rowRenderer = items => ({ index, style }) => {
  const item = items[index]

  if (!item) return null

  const patchedStyle = {
    ...style,
    top: style.top + padding,
    left: style.left + padding,
    height: style.height - padding,
    width: `calc(${style.width} - ${padding * 2}px)`
  }

  return (
    <Draggable
      index={index}
      key={item.id}
      draggableId={item.id}
    >
      {(provided, snapshot) => (
        <ListItem
          item={item}
          provided={provided}
          style={patchedStyle}
          isDragging={snapshot.isDragging}
        />
      )}
    </Draggable>
  )
}

const Column = memo(({ items }) => {
  return (
    <div style={{ display: 'flex' }}>
      <Droppable
        mode='virtual'
        droppableId='column'
        renderClone={(provided, snapshot, rubric) => (
          <ListItem
            provided={provided}
            isDragging={snapshot.isDragging}
            item={items[rubric.source.index]}
          />
        )}
      >
        {(droppableProvided, snapshot) => {
          const itemCount = snapshot.isUsingPlaceholder
            ? items.length + 1
            : items.length

          return (
            <List
              width={300}
              height={600}
              rowHeight={50}
              rowCount={itemCount}
              ref={ref => {
                if (ref) {
                  // eslint-disable-next-line react/no-find-dom-node
                  const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref)
                  if (whatHasMyLifeComeTo instanceof window.HTMLElement) {
                    droppableProvided.innerRef(whatHasMyLifeComeTo)
                  }
                }
              }}
              style={{
                transition: 'background-color 0.2s ease',
                backgroundColor: snapshot.isDraggingOver ? '#0a84e3' : '#74b9ff'
              }}
              rowRenderer={rowRenderer(items)}
            />
          )
        }}
      </Droppable>
    </div>
  )
})

export default () => {
  const [items, setItems] = useState([])

  useEffect(() => {
    const generateItems = new Array(2500).fill().map((value, id) => (({
      id: `id-${id}`,
      content: `content ${id}`
    })))
    setItems(generateItems)
  }, [])

  const onDragEnd = result => {
    if (!result.destination) return

    setItems(reorder(
      items,
      result.source.index,
      result.destination.index
    ))
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Column items={items} />
    </DragDropContext>
  )
}