Обеспечение максимальной ширины гибкого контейнера для всех изменяемых размеров дочерних элементов

Question

С учетом фиксированного размера flex-контейнера с 2 столбцами:

1. Левый Dynami c основанный на контенте столбец ширины;
2. Обычная изменяемого размера (в обоих направлениях) textarea.

Я хочу контролировать textarea ширину, когда пользователь изменяет размеры (в обоих направлениях).

Как заставить размер контейнера max-width на textarea (без javascript и / или отключить горизонтальное изменение размера), как если бы textarea был прямым потомком контейнера?

Единственное работающее CSS -только решение, которое я нашел, это display: contents для столбца .right-content, который, к сожалению, не поддерживается всеми браузерами .

.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

Просто сделайте, как показано ниже:

.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

Вот решение, которое может быть вам подсказкой, но после изменения размера текстовой области невозможно уменьшить его высоту - мне интересно, почему

.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>