align and automatically grow items with flex-box

I have a score board that looks like this

I am trying to let the team boxes (gray background) grow depending of the length of the team name while keeping the scores (red box) centered. The html:

<div class="box">
   <div class="row">
      <div class="team">
         long team name
      </div>
      <div class="score-board">
         <div class="score">
            7
         </div>
         <div class="score">
            8
         </div>
         <div class="score">
            9
         </div>
      </div>
      <div class="team team-right">
         team short
      </div>
   </div>
</div>

and the css:

.box {
   width: 400px;
   font-family: sans-serif;
}

.row {
   width: 100%;
   display: flex;
   justify-content: space-between;
   border: 1px solid blue;
}

.team {
   background-color: silver;
   /* flex-basis: 152px; */
}

.team-right {
   text-align: right;
}

.score-board {
   border: 1px solid red;
   display: flex;
   justify-content: center;
}

.score {
   width: 30px;
   border: 1px solid lightgreen;
   text-align: center;
}

the only way I can achieve this is to uncomment the flex-basis: 152px; in the team-class. I have set the outer box to a fixed width, but is there a responsive way to solve this, without having a fixed sized container?