Enforce flex container's max-width to all resizable children elements

Question

Given a fixed-size flex container with 2 columns:

1. A left dynamic content-based width column;
2. A plain resizable (in both directions) textarea.

I want to control the textarea width, when resized (in both directions) by a user.

How can I enforce container's max-width size to the textarea (without javascript and/or disabling horizontal resize) as if the textarea was a direct child of the container?

The only working CSS-only solution that I've found is display: contents on the .right-content column which unfortunately is not supported by all browsers.

.container {
  max-width: 100px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}

.right-content {
  display: contents;
}

<div class="container">
  <div class="left-content">foo</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>

Answer 1

Simply do like below:

.container {
  max-width: 100px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}
.right-content {
  min-width:0; /* this will prevent the element from growing more than the flex container
                  related: https://stackoverflow.com/q/36247140/8620333*/
}

textarea {
  max-width:100%; /* this will prevent the text area from growing more than its parent*/
  display:block;  /* this will remove the whitespace from the bottom*/
  box-sizing:border-box; /* don't forget this*/

  opacity:0.8; /* to illustrate */
}

<div class="container">
  <div class="left-content">foo</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>

Answer 2

Here is a solution that could be a hint for you, but after resizing textarea it's impossible to reduce its height - I'm wondering why

.container {
  max-width: 200px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}

.right-content textarea {
    resize: vertical;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.right-content {
    flex-grow: 1;
    box-sizing: border-box;
}

<div class="container">
  <div class="left-content">Lorem ipsum dolor amet</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>