CSS - flex, max-width

Question

У меня здесь есть кодовая ручка - https://codepen.io/anon/pen/ePWJGE

Возможно ли иметь элемент с максимальной шириной и другие элементы занимают оставшееся пространство.

Во втором контейнерев моем коде ручки я бы хотел, чтобы серая полоса имела максимальную ширину 300 пикселей, а оставшиеся элементы были равномерно распределены в пространстве ремианинга.

.container{
  border: 1px solid lightgrey;
  max-width: 900px;
}
.row{
  display: flex;
  justify-content: space-between;
  //flex-wrap:wrap;
}

.row-item{
  padding: 10px 5px;
  border-left: 1px solid grey;
}

.row:nth-child(even){
  background: lightgrey;
}

.mobile-nav{
  display: none;
}

.row-item-bar{
  flex-grow: 1;
}

.bar{
  background: lightgrey;
  height: 20px;
  max-width: 300px;
}

@media(max-width: 500px){
  .row{
    display: block;
  }

  .sc-left{
    float: left;
  }

  .sc-right{
    float: right;
  }

  .row-item{
    border-bottom: 1px solid grey;
  }

  .mobile-nav{
    display: inline-block;
  }
}

Answer 1

Вместо добавления max-width к .bar Я думаю, вы должны добавить max-width к .row-item-bar

проверить фрагмент.

.container{
  border: 1px solid lightgrey;
  max-width: 900px;
}
.row{
  display: flex;
  justify-content: space-between;
  //flex-wrap:wrap;
}

.row-item{
  padding: 10px 5px;
  border-left: 1px solid grey;
}

.row:nth-child(even){
  background: lightgrey;
}

.mobile-nav{
  display: none;
}

.row-item-bar{
  flex-grow: 1;
  max-width: 300px;
  box-sizing: border-box;
}

.bar{
  background: lightgrey;
  height: 20px;
  max-width: 300px;
}

@media(max-width: 500px){
  .row{
    display: block;
  }
  
  .sc-left{
    float: left;
  }
  
  .sc-right{
    float: right;
  }
  
  .row-item{
    border-bottom: 1px solid grey;
  }
  
  .mobile-nav{
    display: inline-block;
  }
}

<div class="container">
  <div class="row">
    <div class="row-item sc-left">
      3456789
    </div>
    <div class="row-item">
      Test Test Test Test Test
    </div>
    <div class="row-item sc-left">
      10/12/73
    </div>
<!--     <div class="row-item row-item-bar">
      <div class="bar"></div>
    </div> -->
   
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="row-item sc-left">
      3456789
    </div>
    <div class="row-item">
      Test Test Test Test Test
    </div>
    <div class="row-item sc-left">
      10/12/73
    </div>
    <div class="row-item row-item-bar">
      <div class="bar"></div>
    </div>
   
  </div>
</div>