html - 对所有可调整大小的子元素强制使用 flex 容器的最大宽度

Question

给定一个具有 2 列的固定大小的 flex 容器:

左动态基于内容的宽度列；

一个普通的可调整大小的(双向)文本区域。

我要控制 textarea宽度，当用户调整大小(在两个方向)时。

如何强制执行容器的 max-width大小为 textarea (没有 javascript 和/或禁用水平调整大小)就像 textarea是容器的直接 child 吗？

我发现的唯一可行的仅 CSS 解决方案是 display: contents在 .right-content哪一栏 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

简单地做如下:

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