Media queries on different browsers do not match with flex-wrap or auto-fit

To address inconsistent rendering across browsers due to variations in vertical scrollbar widths, consider using CSS Grid instead of Flexbox. CSS Grid provides a more reliable layout structure, allowing you to define explicit grid rows and columns, making it easier to control element placement across different viewports.

Utilize CSS custom properties alongside JavaScript event listeners to dynamically adjust your styles based on viewport changes without relying heavily on @media queries. This approach maintains performance while providing flexibility across different browsers.

Implement a 'container query' approach for specific layout adjustments when dealing with varying container sizes across different browsers. Although container queries can't replace global media queries, they can help manage layout within a defined area, enhancing responsiveness.

Read at SitePoint Forums | Web Development & Design Community