HTML <textarea> 不尊重 \"flex-grow\"

【问题标题】：HTML <textarea> does not respect "flex-grow"HTML <textarea> 不尊重 \"flex-grow\"
【发布时间】：2022-11-26 01:39:49
【问题描述】：

在下面的 sn-p 中你可以看到 <div> 增长了，但是 <textarea> 没有增长，为什么？在 Chrome 和 Firefox 中是一样的。

details {
  display: flex;
  width: 100%;
  background: gray;
}

div, textarea {
  display: block;
  flex-grow:1;
  background: red;
}

<details open>
    <summary>
    Summary
    </summary>
    <textarea>text area does not grow</textarea>
    <div>Div does grow</div>
</details>

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，所有 html 输入（包括 textarea）都具有某种固定宽度，因此在将宽度更改为 100% 之前，flex-grow 似乎什么都不做

details {
  display: flex;
  width: 100%;
  background: gray;
}

div, textarea {
  display: block;
  flex-grow:1;
  background: green;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

<details open>
    <summary>
    Summary
    </summary>
    <textarea>text area does grow</textarea>
    <div>Div does grow</div>
</details>

【讨论】：