title: How to make textbox fit container but with minwidth?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.SearchWrap {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  
  .SearchInput {
    margin-bottom: 2px;
    border: 1px solid #b8b8b8;
    padding: 2px 20px 2px 4px;
    min-width: 100px;
    outline: none;
  }
  
  .StyledSearchIcon {
    height: .9em;
    position: absolute;
    right: 4px;
    fill: #808080;
    pointer-events: none;
  }
  
  .Container {
    background-color: yellow;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
    &lt;div class="SearchWrap"&gt;
      &lt;input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value=""&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"&gt;&lt;path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"&gt;&lt;/path&gt;&lt;/svg&gt;
    &lt;/div&gt;
    &lt;p&gt;xxxx&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My <code>&lt;input&gt;</code> is rendering as 176px wide, but I only want it to be 100px wide (the min-width). <em>However,</em> if there's more content (more xxxx's) then the input should stretch as wide as it needs to be to fill the width of the container.</p>
  
  <p>How can I do this? </p>
  
  <p>I tried adding <code>width: auto</code> and various values for <code>flex</code> but I can't get it to behave the way I want.</p>
  
  <p>Note that I do not know the width of <code>.Container</code>.</p>