CSS Properties: How to stretch items to fit the container?

Last update on February 15 2024 06:20:52 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Specify character encoding -->
<title>How to stretch items to fit the container</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<div id="xyz"><!-- Start of div with id "xyz" -->
<p>align-content: stretch</p><!-- Paragraph indicating the alignment content property -->
<div id="w3r"><!-- Start of div with id "w3r" -->
<div></div><!-- First nested div -->
<div></div><!-- Second nested div -->
<div></div><!-- Third nested div -->
<div></div><!-- Fourth nested div -->
<div></div><!-- Fifth nested div -->
<div></div><!-- Sixth nested div -->
</div><!-- End of div with id "w3r" -->
</div><!-- End of div with id "xyz" -->
<style type="text/css">/* Begin CSS styling*/
#xyz > div { /* CSS rule for div elements directly under the div with id "xyz" */
  display: -webkit-flex; /* Use flexbox layout for Safari browsers */
  display: -ms-flex; /* Use flexbox layout for Microsoft browsers */
  display: flex; /* Use flexbox layout for other browsers */
  -webkit-flex-flow: row wrap; /* Set flex direction to row and allow wrapping for Safari */
  flex-flow: row wrap; /* Set flex direction to row and allow wrapping for other browsers */
  width: 140px; /* Set width of the div to 140 pixels */
  height: 140px; /* Set height of the div to 140 pixels */
  background: #CC0000; /* Set background color of the div */
}
#xyz > div > div { /* CSS rule for div elements directly under the divs under the div with id "xyz" */
  margin: 2px; /* Set margin around the divs */
  width: 30px; /* Set width of the divs to 30 pixels */
  min-height: 30px; /* Set minimum height of the divs to 30 pixels */
  background: #FFCC99; /* Set background color of the divs */
}
#w3r { /* CSS rule for the div with id "w3r" */
  -webkit-align-content: stretch; /* Align content to stretch for Safari */
  align-content: stretch; /* Align content to stretch for other browsers */
}
</style><!-- End of CSS styling -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

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 Pen align-content-stretch-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	No	No

Go to Exercise page