Make a div fill up the remaining width

The Flex-grow muscle

The flex-grow property gives superpowers to div that stretch according to the space available. If we have it as 1, your div will grow to absorb any free space in the container, while others with flex-grow: 0 remain static.

.static-div { flex-grow: 0; width: 100px; } /* Baby Groot */
.dynamite-div { flex-grow: 1; } /* Hulk Smash */


This means the dynamite-div soaks up all the extra space, ensuring a balanced layout, no matter the parent's size.

Flexbox’s fluid dynamics

Flexbox model delivers the magic of fluid layouts. You can even define responsive constraints by setting properties like min-width and max-width.

.fluid-div { flex: 1; min-width: 100px; max-width: 200px; } /* Rules but cool */


This div stays flexible for humanity, but does not go rogue due to defined constraints.

Back to the float age

Before flexbox, there were float:left; or float:right;, combined with margin properties. Although possible, these methods are less flexible and require more coding management.

#parent { width: 500px; }
#left-div { float: left; width: 100px; } /* Row, row, row your div */
#right-div { float: right; width: 100px; } /* Out of the way, div coming thru */
#center-div { overflow: auto; } /* Just going with the flow */


Quirks of float method

The float solution is highly dependent on the order of html elements and overflow properties. These solutions can be mind-numbing compared to the simplicity of flexbox.

Cross-browser flexbox

Flexbox enjoys large-scale adoption across modern browsers. However, for older browser support, use float-based layouts or check for compatibility.

Responsive div designs

Flexbox formulates the foundation for practising responsive design. By using responsive media queries that reshape the flex properties for different screen sizes, you’ll score big in the realm of responsive design.