title: Styling Material Vue AutoComplete suggestion drop down
body: <p><strong>Background</strong></p>
  
  <p>I am using the Material Vue AutoComplete component to provide TypeAhead functionality to my users in a vue application. </p>
  
  <p>When the Chrome browser is minimized in width to check for responsiveness I noticed the suggestion container gets smaller in width but, the text inside of the suggestion container does not break in the box. Instead, the sentence that is being displayed runs off the box to the right of the screen. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>I can not figure out how to add styles to correct the before mentioned issue. </p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>&lt;div class="md-layout md-gutter"&gt;
  &lt;div class="md-layout-item md-small-size-100"&gt;
  &lt;md-autocomplete 
    v-model="currentCustomer"
    :md-options="customers" 
    @md-changed="getCustomers" 
    @md-opened="getCustomers"
    @md-selected="getSelected"
    :md-fuzzy-search="false"
   &gt;
   &lt;label&gt;Search Customers...&lt;/label&gt;
   &lt;template slot="md-autocomplete-item" slot-scope="{ item, term }"&gt;
   &lt;md-highlight-text :md-term="term"&gt;{{ item.email }}&lt;/md-highlight-text&gt;
   &lt;/template&gt;
  &lt;template slot="md-autocomplete-empty" slot-scope="{ term }"&gt;
   No customers matching "{{ term }}" were found. &lt;a @click="addSearchedCustomer(term)"&gt;Create &lt;/a&gt;this customer.
  &lt;/template&gt;
  &lt;/md-autocomplete&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Specifically this line runs off the screen when there are no search results, </p>
  
  <pre><code>&lt;template slot="md-autocomplete-empty" slot-scope="{ term }"&gt; No customers matching "{{ term }}" were found. &lt;a @click="addSearchedCustomer(term)"&gt;Create &lt;/a&gt;this customer.&lt;/template&gt;
  </code></pre>
  
  <p><strong>Image Example</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/lWPiS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lWPiS.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/nccEq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nccEq.png" alt="enter image description here"></a></p>
  
  <p><a href="https://vuematerial.io/components/autocomplete" rel="nofollow noreferrer">Link AutoComplete</a></p>
  
  <p><strong>UPDATE</strong>
  <strong>What I have tried</strong></p>
  
  <p>When I inspect the AutoComplete with Chrome Dev Tools, I expand the div and this is what it looks like, </p>
  
  <p><em>Suggestion Container Div -</em></p>
  
  <p><a href="https://i.stack.imgur.com/KMYxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMYxd.png" alt="enter image description here"></a></p>
  
  <p>Question</p>
  
  <p>Looking at the documentation I can not seem to find a way to handle this. How can I apply styles to this suggestion box so it will break the text as the screen gets smaller?</p>