Does a horizontal list require the elements to be position absolute?

[mt-deva]

I've created a horizontal list; but it looks like it's required to have the list items position absolute for it to work.

This is a problem as it will re-render all children on resize which causes a bunch of performance problems for us.

https://codesandbox.io/p/sandbox/scroll-resize-working-forked-wrjlwf?file=%2Fsrc%2FApp.tsx

[mt-deva]

Answered here

#476 (comment)

Created a working demo here
https://codesandbox.io/p/sandbox/horizontal-scroll-nsmfjd

import React from "react";
import "./styles.css";
import { useVirtualizer } from "@tanstack/react-virtual";

const columns = new Array(10000)
  .fill(true)
  .map(() => 75 + Math.round(Math.random() * 100));

export default function App() {
  return (
    <div>
      <h3>Columns</h3>
      <ColumnVirtualizer columns={columns} />
    </div>
  );
}

function ColumnVirtualizer({ columns }) {
  const parentRef = React.useRef();

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
  });

  const items = columnVirtualizer.getVirtualItems();

  const [paddingLeft, paddingRight] =
    items.length > 0
      ? [
          Math.max(0, items[0].start - columnVirtualizer.options.scrollMargin),
          Math.max(
            0,
            columnVirtualizer.getTotalSize() - items[items.length - 1].end
          ),
        ]
      : [0, 0];

  console.log(paddingLeft, paddingRight);

  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          width: `100%`,
          height: `100px`,
          overflow: "auto",
        }}
      >
        <div
          style={{
            display: "flex",
            height: "100%",
            paddingLeft,
            paddingRight,
          }}
        >
          {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
            <div
              key={virtualColumn.index}
              ref={virtualColumn.measureElement}
              className={
                virtualColumn.index % 2 ? "ListItemOdd" : "ListItemEven"
              }
            >
              Column {virtualColumn.index}
            </div>
          ))}
        </div>
      </div>
    </>
  );
}