CSS - Make Child Elements Responsive & Equal Width with FlexBox

How to make child elements responsive and equal width using CSS FlexBox, with code examples.

The HTML has a container element with class "container" and multiple <div> child elements.

<div class="container">
	<div></div><div></div><div></div><div></div><div></div>
</div>

To make all child elements equal width and responsive to the parent element size in FlexBox, set "flex-grow" to "1" on all children.

The "flex-grow" property sets the width ratio of elements in FlexBox. Setting it to "1" on all makes them equal width.

When "flex-grow" is present, "flex-wrap: wrap" on the parent is ignored, so elements will not wrap.
Any width set on the child elements is also ignored.

.container {
	width: 100%;
	display: flex;
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #404040; 
}

.container div {
	flex-grow: 1;
	height: 100px;
	background-color: #4169e1;
}