title: How to avoid select drop-downs going offscreen on smaller device
body: <p>I'm trying really hard to avoid the following scenario on smaller devices.<br>
  The dropdown box should not go out of screen.</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
        &lt;label for="category" class="col-sm-2 col-form-label"&gt;Category&lt;/label&gt;
        &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt; 
          &lt;select col-sm-4style="width:100%" class="custom-select form-control" name="category" #cat (ngModelChange)='updateCategoryId(cat)' [(ngModel)]="form.category"
            #category="ngModel"&gt;
            &lt;option class="col-sm-4" *ngFor="let type of categoryNames;let itemIndex = index" [selected]="itemIndex == 0" [value]="type.name"
              [id]="type.id"&gt;{{type.name}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the result looks like:
  <a href="https://i.stack.imgur.com/nKqUZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nKqUZ.png" alt="dropdown offscreen screenshot"></a></p>
  
  <p>I'm searching for a CSS-based way to avoid this.</p>