I usually ask questions regards Angular but today I have a question regarding CSS and FlexBox. In my app I display some information on the interface, user name, company name and department name, should the information be long (like a long name with many characters) I want the text to wrap within its cell and the row the text is displayed in grow to fit the text. The text should not bleed into the row below.

My HTML looks like so...

```
<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>

```

Here is my CSS (Less written using BEM)

```
.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%;
    }
  }
}

```

Here is a JS Bin <https://jsbin.com/juguvovelo/edit?html,css,output>

as you can see the text bleeds into the row below and out of the container! As this screen shot demonstrates! I am setting the `flex-grow` of the `.assignment__row`but nothing seems to get the effect I want?

[![enter image description here](https://i.stack.imgur.com/o7M70.png)](https://i.stack.imgur.com/o7M70.png)

If any one could help me resolve this I would be most apprecative. Perhaps it is a problem with my HTML structure?