Estoy tratando de descubrir cómo asegurarme de que el último elemento de cada fila ocupe el espacio restante de la fila en la que se encuentra. He jugado con el ancho y otras propiedades flexibles, pero no pude obtener esto para trabajar.

El último elemento actualmente no ocupa el resto del espacio en la fila.

¿Qué estoy haciendo mal?

 const styles = { container: { padding: "1rem", border: "1px solid black", height: "100%", display: "flex", flexWrap: "wrap" }, box: ({ index }) => ({ height: "2rem", width: index % 2 === 0 ? "3rem" : index % 3 === 0 ? "5rem" : "7rem", border: "1px solid gray", margin: "1rem" }) }; export default function App() { return ( <div style={styles.container}> {Array.from({ length: 7 }, (_, index) => { return <div style={styles.box({ index })} />; })} </div> ); }