<div class="box">
  <div class="item">1</div>
  <div class="item">222</div>
  <div class="item">3</div>
</div>
  .box {
    width: 400px;
    height: 50px;
    display: flex;
    background-color: #eee;
  }
  .item {
    height: 50px;
  }
  .item:nth-child(1) {
    width: 50px;
    background: red;
  }
  .item:nth-child(2) {
    width: 70px;
    flex-basis: auto;
    flex-grow: 2;
    background: grey;
  }
  .item:nth-child(3) {
    width: 50px;
    flex-basis: 100px;
    flex-grow: 1;
    background: yellow;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.