Problem: Flex Wrap Fluid Columns
Problem description
A .container contains multiple .column items. You must display them in two equal height columns that wrap to a single column on screens narrower than 600px.
Goal
Use Flexbox to create a two-column fluid layout with wrap, equal heights, and mobile fallback.
Constraints
Only CSS may be modified; HTML cannot be changed, and no JavaScript may be used.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Flex Wrap Fluid Columns
Problem description
A .container contains multiple .column items. You must display them in two equal height columns that wrap to a single column on screens narrower than 600px.
Goal
Use Flexbox to create a two-column fluid layout with wrap, equal heights, and mobile fallback.
Constraints
Only CSS may be modified; HTML cannot be changed, and no JavaScript may be used.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.