I'm trying to figure out how to ensure that the last element of every row takes up the remaining space of the row that it's in. I've played around with the width and other flex properties, but I wasn't able to get this to work.

The last element currently does not take up the rest of the space in the row.

What am I doing wrong?

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>
  );
}