title: Make flex row stretch to height of content in a cell - contents bleed out of container DIV
body: <p>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.</p>
  
  <p>My HTML looks like so...</p>
  
  <pre><code>&lt;div class="assignment"&gt;
    &lt;!-- Here we want to colums, one to contain the rows of info
        The other to contain a single button --&gt;
    &lt;div class="assignment__details"&gt;
      &lt;div class="assignment__row"&gt;
        &lt;div class="assignment__row__title"&gt;User&lt;/div&gt;
        &lt;div class="assignment__row__value"&gt;
          Oh this is a long user name
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="assignment__row"&gt;
        &lt;div class="assignment__row__title"&gt;Company:&lt;/div&gt;
        &lt;div class="assignment__row__value"&gt;
          Oh this is a long company name
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="assignment__row"&gt;
        &lt;div class="assignment__row__title"&gt;Department:&lt;/div&gt;
        &lt;div class="assignment__row__value" &gt;
          This is Such a long Department Name
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- here is the col with the button --&gt;
    &lt;div class="assignment__controls"&gt;
      &lt;button mat-icon-button (click)="doSomething()"&gt;
        &lt;mat-icon&gt;edit&lt;/mat-icon&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS (Less written using BEM)</p>
  
  <pre><code>.assignment {
    display: flex;
    background-color: #C0C0C0;
    padding: 10px;
    width: 300px; // just for demo puropses
  
    &amp;__details {
      flex: 1 1 80%;
    }
  
    &amp;__controls {
      display: flex;
      flex: 1 1 20%;
      justify-content: flex-end;
      align-items: center;
    }
  
    &amp;__row {
      display: flex;
      height: 21px;
  
      &amp;__title {
        flex: 1 0 50%;
      }
  
      &amp;__value {
        flex: 1 0 50%;
      }
    }
  }
  </code></pre>
  
  <p>Here is a JS Bin <a href="https://jsbin.com/juguvovelo/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/juguvovelo/edit?html,css,output</a></p>
  
  <p>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 <code>flex-grow</code> of the <code>.assignment__row</code>but nothing seems to get the effect I want?</p>
  
  <p><a href="https://i.stack.imgur.com/o7M70.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o7M70.png" alt="enter image description here"></a></p>
  
  <p>If any one could help me resolve this I would be most apprecative. Perhaps it is a problem with my HTML structure?</p>