How can you make flex container items that flow from left to right to fill all space from top to bottom?

To make the items flow from left to right, we can use flex-direction:row.

To make the items fill the whole row, we can use align-items:stretch.

To make the content fill the whole container, we can use align-content:stretch.

Note that the flex items shouldn't have explicitly set height.

Also note that the default value for both align-items and align-content is stretch so if you don't define these properties, the solution will work even without them.

CSS

div {
  display: flex;
  flex-direction: row;
  align-content: stretch; 
  align-items: stretch;
}