title: Shrink width of long select/textbox inputs when container shrinks
body: <p>The example snippet below produces a layout like this:</p>
  
  <p><a href="https://i.stack.imgur.com/o4Ckv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4Ckv.png" alt="enter image description here"></a></p>
  
  <p>The problem here is when the cyan content is too wide, it increases the size of the parent div, but what I <em>want</em> to happen is for it to decrease the width of the bottom-left div, resulting in something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zP9iv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zP9iv.png" alt="enter image description here"></a></p>
  
  <p>The inputs in the bottom-left are in a table, and in particular:</p>
  
  <ul>
  <li>The select input contains a long option so it's default size is fairly wide, and</li>
  <li>The textbox input default size is just... wide.</li>
  </ul>
  
  <p>This is all using flex layouts. I'd like to shrink the bottom left by shrinking the width of the inputs only (the label column should remain the same).</p>
  
  <p>Is there a way I can limit the input sizes to never cause the total width of the bottom half to exceed the total width of the top half (yellow)? Basically I want the entire thing to be the width of the yellow box, and the bottom-left div to be the one that shrinks if the bottom-right is too wide.</p>
  
  <p>I do <em>not</em> know the size of the yellow/blue content ahead of time, it's all dynamically generated. All I know is the yellow one is wide enough to comfortably accommodate everything at the bottom assuming I can shrink the inputs a bit.</p>
  
  <p>I am open to the idea of replacing that table with flex divs if needed, it's just the table is a bit easier to lay out for the form down there.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var state = true;
  window.setInterval(function () {
    document.getElementById('example-stuff2').style.width = (state ? '10px' : '100px');
    state = !state;
  }, 2000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div { border: 1px solid red; }
  
  #content, #panel, #bottom { display: flex; }
  #content, #panel { flex-direction: column; }
  #content { align-items: center; }
  #bottom-right { flex-grow: 1; }
  
  /* Example placeholders for content of unknown size. */
  span { display: inline-block; }
  #example-stuff1 { background: yellow; width: 300px; height: 120px; }
  #example-stuff2 { background: cyan; width: 100px; height: 10px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    &lt;div id="panel"&gt;
      &lt;div id="top"&gt;&lt;span id="example-stuff1"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div id="bottom"&gt;
        &lt;div id="bottom-left"&gt; 
          &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;Label:
              &lt;td&gt;
                &lt;select&gt;
                  &lt;option&gt;Option 1&lt;/option&gt;
                  &lt;option&gt;Option 2 is a pretty long one&lt;/option&gt;
                  &lt;option&gt;Option 3&lt;/option&gt;
                &lt;/select&gt;
          &lt;tr&gt;&lt;td&gt;Label:
              &lt;td&gt;&lt;input type="textbox" value="example"&gt;
          &lt;/table&gt; 
        &lt;/div&gt;
        &lt;div id="bottom-right"&gt;&lt;span id="example-stuff2"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Note: The cyan part's width is unknown ahead of time, but it is unchanging once the page is rendered (unlike the snippet). It may be narrow (in which case everything fits) or it may be a bit too wide (in which case I run into the issue where I need to shrink the inputs). The animation in the snippet is just to illustrate the two cases for this question, in reality the cyan content is determined when the page is served and stays that way.)</p>