请问一下，如何才能让`<div style=" auto: flow; ">` 容器内的浮动元素滚动到第一行呢？

Question

请问一下，如何才能让<div style=" auto: flow; "> 容器内的浮动元素滚动到第一行呢？

现有如下的示例：

ChildComp.tsx 代码：

import { forwardRef, useImperativeHandle } from "react";


export interface ChildCompProps {
    list: string[]
}

const ChildComp = forwardRef((props: ChildCompProps, ref) => {
    
    useImperativeHandle(ref, ()=> ({
        // 滑动到指定的item
        scrollToIdx: (index: number) => {
            console.log(index)
        }
    }))

    return ( <>
    <div style={{
        width: '500px',
        height: '400px',
        backgroundColor: 'grey',
        overflow: 'auto'
    }}>
        {
            props.list.map((item, index) => (
                <div 
                key={index}
                style={{
                    backgroundColor: 'white',
                    width: '50px',
                    height: '20px',
                    margin: '8px',
                    display: 'inline-block',
                    float: 'left'
                }}>{item}-id:{index}</div>
            ))
        }
    </div>
    </> );
})

export default ChildComp; 

App.tsx 代码：

import { useRef } from 'react'
import './App.css'
import ChildComp, {ChildCompProps} from './components/ChildComp'

function App() {

  const ref = useRef()

  const data: ChildCompProps = {
    list:[
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
      "111", "222", "333","444", "555", "666", "777", "888", "999", "000",
    ]
  }

  return (
    <>
      <ChildComp {...data} ref={ref}></ChildComp>
    </>
  )
}

export default App

现在效果可以滚动:

====

请问下，在useImperativeHandle的scrollToIdx中，如何才能进行滚动到指定的item呢(这里的index就是id)

 useImperativeHandle(ref, ()=> ({
        // 滑动到指定的item
        scrollToIdx: (index: number) => {
            console.log(index)
        }
    }))