Divide Width of Element Between Child Divs With CSS

Question

I have a varying number of inline-block divs that I want to collectively take up 100% of their parent. Can this be done without JavaScript? The only way I can think o

Answer 1

I'd like to expound on @lingeshram's answer. Flexboxes have come so far that I think it's really the way to do it now. If you have to support old browsers, be sure to check caniuse first.

.container {
  display: flex; /* or inline-flex */
}

.col {
  flex-grow: 1;
  border: 1px solid #000;
}

.col2x {
  flex-grow: 2;
  border: 1px solid #000;
}

Evenly split three children

  Inner 1
  Inner 2
  Inner 3




Evenly split two children

  Inner 1
  Inner 2




Split three children, but the middle is twice the size of the others

  Inner 1
  Inner 2
  Inner 3

Here is a pretty good guide to the different ways you can use flexbox.