Сделайте так, чтобы гибкая строка растягивалась до высоты содержимого в ячейке - содержимое вытекало из контейнера DIV

Обычно я задаю вопросы по Angular, но сегодня у меня вопрос по CSS и FlexBox. В моем приложении я отображаю некоторую информацию об интерфейсе, имени пользователя, названии компании и названии отдела, если информация будет длинной (например, длинное имя с большим количеством символов). в рост, чтобы соответствовать тексту. Текст не должен влезать в строку ниже.

Мой HTML выглядит так...

<div class = "assignment">
  <!-- Here we want to colums, one to contain the rows of info
      The other to contain a single button -->
  <div class = "assignment__details">
    <div class = "assignment__row">
      <div class = "assignment__row__title">User</div>
      <div class = "assignment__row__value">
        Oh this is a long user name
      </div>
    </div>
    <div class = "assignment__row">
      <div class = "assignment__row__title">Company:</div>
      <div class = "assignment__row__value">
        Oh this is a long company name
      </div>
    </div>
    <div class = "assignment__row">
      <div class = "assignment__row__title">Department:</div>
      <div class = "assignment__row__value" >
        This is Such a long Department Name
      </div>
    </div>
  </div>
  <!-- here is the col with the button -->
  <div class = "assignment__controls">
    <button mat-icon-button (click) = "doSomething()">
      <mat-icon>edit</mat-icon>
    </button>
  </div>
</div>

Вот мой CSS (менее написанный с использованием БЭМ)

.assignment {
  display: flex;
  background-color: #C0C0C0;
  padding: 10px;
  width: 300px; // just for demo puropses

  &__details {
    flex: 1 1 80%;
  }

  &__controls {
    display: flex;
    flex: 1 1 20%;
    justify-content: flex-end;
    align-items: center;
  }

  &__row {
    display: flex;
    height: 21px;

    &__title {
      flex: 1 0 50%;
    }

    &__value {
      flex: 1 0 50%;
    }
  }
}

Вот JS-бин https://jsbin.com/juguvovelo/edit?html, css, вывод

как вы можете видеть, текст перетекает в строку ниже и выходит из контейнера! Как показывает этот снимок экрана! Я устанавливаю flex-grow из .assignment__row, но ничего не дает желаемого эффекта?

Если бы кто-нибудь мог помочь мне решить эту проблему, я был бы очень признателен. Возможно, это проблема с моей структурой HTML?