title: Angular mat-list-option text not getting wrapped
body: <p>I have list of checkbox, when the text of the checkbox are too long it doesn't wraps around properly PFA image:</p>
  <p><a href="https://i.stack.imgur.com/vBk4L.png" rel="nofollow noreferrer">Checkbox image Please check the red box</a></p>
  <p>HTML code:</p>
  <pre><code>         &lt;mat-selection-list #rolesSelection
                    class=&quot;checkbox-list&quot;
                    [formControlName]=&quot;formControlName&quot;
                    required&gt;
               &lt;div class=&quot;builder-role&quot; *ngFor=&quot;let role of roles; index as i&quot;&gt;
                 &lt;mat-list-option class=&quot;checkbox-list-option&quot;
                     checkboxPosition=&quot;before&quot;
                     (click)=&quot;onRoleSelect(role)&quot;
                     (keyup.enter)=&quot;onRoleSelect(role)&quot;
                     (keyup.space)=&quot;onRoleSelect(role)&quot;
                     [value]=&quot;role&quot;&gt;
                 {{role.getName()}}
              &lt;/mat-list-option&gt;
              &lt;mat-form-field *ngIf=&quot;shouldShowControl(role.getRoleId())&quot;
                    class=&quot;builder-students&quot;&gt;
            &lt;input appDigitOnly
             i18n-aria-label
             matInput
             aria-label=&quot;Number of students&quot;
             max=&quot;{{maxNumberOfStudents}}&quot;
             min=&quot;1&quot;
             name=&quot;{{role.getRoleId()}}&quot;
             type=&quot;number&quot;
             value=&quot;{{getNumStudents(role)}}&quot;
             [formControlName]=&quot;role.getRoleId()&quot;
             [errorStateMatcher]=&quot;matcher&quot;
             (change)=&quot;setStudents($event.target.value, role)&quot;&gt;
          &lt;/mat-form-field&gt;
         &lt;/div&gt;
        &lt;/mat-selection-list&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code> .checkbox-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .builder-role {
    display: flex;
    width: 50%;
  }
  
  .builder-students {
    max-width: 45px;
  }
  
  .role-error {
    font-size: 10px;
    text-align: right;
  }
  
  :host ::ng-deep .mat-form-field-infix {
    border: 0;
    text-align: center;
  }
  
  :host ::ng-deep .mat-form-field-wrapper {
    height: 100%;
    line-height: 160%;
    padding: 0;
  }
  
  :host ::ng-deep .mat-form-field-underline {
    bottom: 0;
  }
  
  :host ::ng-deep .mat-list-base .mat-list-item .mat-list-text,
  :host ::ng-deep .mat-list-base .mat-list-option .mat-list-text {
    flex-direction: initial;
  }
  </code></pre>
  <p>I want the checkbox text to be wrapped without any space in between!!! For your reference please check the screenshot attached.</p>