Enforce flex container's max-width to resizable content

Given a fixed-size flex container with 2 columns:

1. A left dynamic content-based width column;
2. A plain resizable textarea.

How can I enforce container's max-width size to the textarea (without javascript)?

The only solution that I've found (at least on latest Chrome) is display: contents on the .right-content column which unfortunately doesn't work on 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>