Have you failed a job interview?
Send us your job interview questions and get correct answers.

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

Experience Level: Junior
Tags: CSSFlexbox

Answer

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

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself