Detect moment when element goes to the next axis in flex-wrap container

I have a code similar to the below code that I made up as a simple example to represent the question.React component code:

import { useState, useRef, useEffect, useCallback } from 'react'import './App.css'function Some_long_array(len: number) {  let array = [];  for (let i = 0; i < len; i++) array.push('array');  return array;}function App() {  const [array, Set_array] = useState(() => Some_long_array(50));  const wrap_box_ref = useRef<HTMLDivElement>(null)  const current_word_ref = useRef<Element | null>(null);  const current_word_index = useRef(0);  const Handle_advance = useCallback(() => {    if (current_word_index.current + 1 >= array.length) return;    current_word_ref.current!.classList.remove('some_class');    current_word_index.current++;    current_word_ref.current = wrap_box_ref.current!.children[current_word_index.current]    current_word_ref.current.classList.add('some_class');  }, [array]);  useEffect(() => {    if (!wrap_box_ref.current) return;    current_word_ref.current = wrap_box_ref.current.children[current_word_index.current];    current_word_ref.current.classList.add('some_class');  }, [])   return (<><div id='wrap_box' ref={wrap_box_ref}>        {          array.map((el, index) => <div className='word' key={el + index.toString()}>              {el}</div>          )        }</div><button style={{padding: 10}} onClick={Handle_advance}>        Click me to advance to next word!</button></>  )}export default App

CSS:

*{  margin: 0;  padding: 0;  box-sizing: border-box;}#wrap_box{  display: flex;  align-items: center;  justify-content: space-between; /* This might change to 'flex-start'. */  flex-wrap: wrap;  gap: 10px;  font-size: 2em;}.word{  display: inline;}.some_class{  background-color: pink;}

In this code I traverse through the flex container with flex-wrap property set to wrap with the reference that is directly manipulated to dynamicly apply styles to the 'current-word'. In my actual code I want to display only three lines of words at all times. To do that I need a function that will modify array: it will remove first N words that represent the first line and modify indices and ref (from useRef) accordingly (considering current viewport width); another function will add words to array later. To understand how many elements from the start (number N I mentioned) I need to remove, I need to somehow figure out the index of the word that is last in line. This way when the button is clicked and the last word in line is 'current' (in the example above - highlighted with pink (if you run the project you'll see it)) I need to execute the function. How can I detect the moment when ref will go to the element that is located on the next line of flex-container? What would be the best approach that is not dependent on CSS properties values?

The first thing I tried was to use combination of getBoundingClientRect() methods on wrap_box_ref and current_word_ref containers to calculate difference of right values of returned objects. If difference is 0, then I can say that current_word_ref div is last in line. I didn't like this approach because it highly depends on justify-content: space-between property-value pair set on wrap_box container. If I later want to change it to flex-start, for example, the code will break.Do you have any ideas how I can identify last word in flex line?