Flexbox

flex-grow: 0 (default)

CSS
.container {
  display: flex;
}

.box-3 {
  flex-grow: 0;
}
Box-1
Box-2
Box-3
Box-4
Box-5

flex-grow: 1

CSS
.container {
  display: flex;
}

.box-3 {
  flex-grow: 1;
}
Box-1
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

.box-3 {
  flex-grow: 1;
}

.box-4 {
  flex-grow: 1;
}
Box-1
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

.box-3 {
  flex-grow: 1;
}

.box-4 {
  flex-grow: 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

// Target all box
.flex-item {
  flex-grow: 1;
}
Box-1
Box-2
Box-3
Box-4
Box-5