title: How do you make an input element fill parent?
body: <p>I've got the following html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;form&gt;
          &lt;input class="search" type="text" /&gt;
          &lt;button class="submit" type="submit"&gt;Go&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to make the text input fill to the size of the container, minus the width of the Go button that will be inline on the right. However, I can't seem to get the input to fill the width of the container. I've got the following css (simplified):</p>
  
  <pre><code>.container {
      height: 100%;
      position: relative;
      width: 100%;
  }
  
  .search {
      left: 0;
      position: absolute;
      right: 40px;
  }
  
  .submit {
      position: absolute;
      right: 0;
      width: 40px;
  }
  </code></pre>
  
  <p>Producing the following design:</p>
  
  <p><img src="https://i.stack.imgur.com/zMrGr.png" alt="enter image description here"></p>
  
  <p>How do I actually get that inner text box to fill the width of the parent? Without using %, since I need it to stretch right up to the button and no further.</p>