CSS Properties: How to stretch items to fit the container?
Solution:
HTML Code:
Explanation:
- The HTML code creates a container div with the ID "xyz" and nested divs within it.
- CSS is used to style the container div and its child divs, including setting width, height, background color, and flexbox properties.
- Flexbox properties are applied to stretch the child divs within the container div using the align-content: stretch; property.
- The align-content property is set to "stretch" for both Safari and other browsers to ensure the child divs stretch to fit the container horizontally and vertically.
Live Demo:
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | No | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.