title: CSS - Automatically adjust width of div
body: <p>I have a dropdown bar with a bunch of options available to select. I want them to be inline but also want them to be scale-able so that they take up the entire width of the div (but also allowing multiple options per row). This is a photo of what I have so far: </p>
  
  <p><a href="https://i.stack.imgur.com/3rQgf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3rQgf.png" alt="photo of what I have so far"></a></p>
  
  <p>Here is the html I have:</p>
  
  <pre><code>&lt;h2&gt;FILTERs&lt;/h2&gt;
  &lt;span&gt;Search:&lt;/span&gt;
  &lt;input id="searchBox" type="text"&gt;&lt;/input&gt;
  &lt;div id="conts" class="filter"&gt;
    &lt;div class="label"&gt;
      &lt;span&gt;Option:&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="selector"&gt;Di1&lt;/div&gt;
      &lt;div class="selector"&gt;Di 12&lt;/div&gt;
      &lt;div class="selector"&gt;D 15&lt;/div&gt;
      &lt;div class="selector"&gt;Div1&lt;/div&gt;
      &lt;div class="selector"&gt;v1234&lt;/div&gt;
      &lt;div class="selector"&gt;Di 3&lt;/div&gt;
      &lt;div class="selector"&gt;D 12&lt;/div&gt;
      &lt;div class="selector"&gt;v 1234&lt;/div&gt;
      &lt;div class="selector"&gt;Di&lt;/div&gt;
      &lt;div class="selector"&gt;D 123&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.filter .content{
    max-width: 96px;
    max-height: 0px;
    margin: 0px 12px 0px 4px;
    background-color: #808080;
    overflow: hidden;
  }
  #vertnav .filter:hover .content{
    max-height: 256px;
  }
  .content .selector{
    background-color: #369;
    padding: 8px 4px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: .1s !important;
  }
  .content .selector:hover{
    background-color: white;
    color: #369;
  }
  </code></pre>
  
  <p><strong>The end goal is that each <code>&lt;div&gt;</code> on the same line will automatically fill the width of the row it is on, while not pushing the other <code>&lt;div&gt;</code>s onto a new line (aka, not using <code>display: block;</code> for example).</strong></p>
  
  <p><strong>I am willing to use JS or jQuery but would prefer to use html and css only for this.</strong> </p>
  
  <p>Thank you.</p>