Expand a div to fill the remaining width

html

responsive-design

flexbox

css

byNikita Barsukov·Sep 15, 2024

Achieve flex-grow: 1; on your designated div within a flex environment to enable it to occupy the remaining space.

.container {
  display: flex;
}

.fill-remaining {
  flex-grow: 1;
}

<div class="container">
  <div>Left Content</div>
  <div class="fill-remaining">Expanding in three, two, one... </div>
</div>

Crafting a two-column layout where the right column surges to take up the leftover space is really as simple as that!

The Play-by-Play Breakdown

Prepping up the Container

First up, your .container needs to adopt the persona of a flex container:

.container {
  display: flex; /* You’ve got the POWER! */ 
  height: 100%; /* Reach for the stars! */ 
}

height: 100%; to allow our divs to fill up the container's height vertical space. However, remember that it will only fill if the html and body are also set to 100% height.

Flexibility with Variable Width

Now onto the left column that needs to accommodate dynamic content. To maintain its variable width, flex property isn’t necessary here. width: auto; takes the stage or you can also set minimum or maximum width if needed:

.variable-width {
  width: auto; /* or min-width/max-width */
}

Expanding Territory

Moving over to the right column, we use flex-grow: 1; to make it occupy the vacant space:

.fill-remaining {
  flex-grow: 1; /* I drink my milk; I grow big and strong! */
  overflow: hidden; /* Trust me, I’m a ninja! */
}

The overflow: hidden; helps enforce a Block Formatting Context thus managing any float-clearing inconvenience.

Say No to Overlap

A frequent trouble with elements floating together is the risk of overlapping. But thanks to our superhero flexbox, there's no need to concern about floating the right column. Flexbox swiftly creates layouts that adapt to content without worrying about overlapping.

Be Visually Clever

As a developer, you might want to apply temporary background colors or borders to visually spot the divisions of your divs:

.variable-width {
  background-color: lightblue; /* This is NOT my final form! */
}

.fill-remaining {
  background-color: lightgreen; /* I'm bright but I swear I won't stay like this! */
}

Be sure to usher these visual cues out when moving into production for a cleaner facade.

Amazing Calc

When your variable-width column's size is determined by surrounding factors, calc()-a-mazing function comes into play for precise width calculations:

.fill-remaining {
  width: calc(100% - 200px); /* Because Math is cool! */
}

This ensures your right column adjusts accurately in harmony with the changing width of its neighbor.

Send an Owly to Legacy Browsers

If by any chance, you've to cater to older browsers like IE6/7, be equipped with hasLayout, a unique concept to them. It's generally triggered through properties like width or height, but isn't a headache in modern web development where flexbox reigns supreme!

Mastering the Flexbox Technique

Align and Distribute the Flex Way!

Flexbox offers properties for aligning and distributing space among items:

.container {
  align-items: stretch; /* Let’s do some yoga! */
  justify-content: flex-start; /* Ready, set, go! */
}

Be Mindful of Responsive Design

Media queries are your knight in shining armour ensuring your layout adapts to various screen sizes:

@media (max-width: 600px) {
  .container {
    flex-wrap: wrap; /* Getting comfy in a little space! */
  }

  .fill-remaining {
    width: 100%; /* Size does not matter, does it? */
  }
}