Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let's use actual math to understand it then apply it to a masonry layout.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A deep mathematical exploration of how flexbox distributes space, covering flex-grow, flex-shrink, and flex-basis mechanics. Using formal math, the post derives the exact conditions needed to build a masonry layout where items with known aspect ratios fill each row to the full container width while sharing the same row height. The key insight: setting flex-basis proportional to each item's aspect ratio and flex-grow to the same ensures all items end up at equal height regardless of their individual aspect ratios.

Flexbox Masonry Layout (Explained with Math) – Frontend Masters Blog