Flexbox

flex-basis: auto; (default)

CSS
.container {
  display: flex;
}

.flex-item {
  flex-basis: auto;
}
Box-1 sathish kumar
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

.box-1 {
  flex-basis: 400px;
}
Box-1 sathish kumar
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

.box-1 {
  flex-basis: 400px;
  flex-grow: 1;
}
Box-1 sathish kumar
Box-2
Box-3
Box-4
Box-5
CSS
.container {
  display: flex;
}

.box-1 {
  flex-basis: 400px;
  flex-grow: 1;
}

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

In conclusion, flex-grow and flex-shrink distribute space proportionally according to each item’s flex-basis.

Set initial size for particular item