title: Enforce flex container's max-width to all resizable children elements
body: <p>Given a <em>fixed-size</em> flex container with 2 columns:</p>
  
  <ol>
  <li>A left <em>dynamic content-based</em> width column;</li>
  <li>A plain <em>resizable</em> (in both directions) textarea.</li>
  </ol>
  
  <p>I want to control the <code>textarea</code> width, when resized (in both directions) by a user.</p>
  
  <p>How can I enforce container's <code>max-width</code> size to the <code>textarea</code> (without javascript and/or disabling horizontal resize) as if the <code>textarea</code> was a direct child of the container?</p>
  
  <p>The only working CSS-only solution that I've found is <code>display: contents</code> on the <code>.right-content</code> column which <a href="https://caniuse.com/#feat=css-display-contents" rel="nofollow noreferrer">unfortunately is not supported by all browsers</a>.</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-css lang-css prettyprint-override"><code>.container {
    max-width: 100px;
    background-color: red;
    display: flex;
  }
  
  .left-content {
    background-color: yellow;
  }
  
  .right-content {
    display: contents;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="left-content"&gt;foo&lt;/div&gt;
    &lt;div class="right-content"&gt;
       &lt;textarea&gt;bar&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>