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

Question

在下面的代码片段中，您可以看到<div>增长，但<textarea>没有，为什么?在Chrome和Firefox中也是一样的。

details {
display: flex;
width: 100%;
background: gray;
}
div, textarea {
display: block;
flex-grow:1;
background: red;
margin-left: 32px;
}

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

Answer 1

所有html输入(包括textarea)默认情况下都有某种固定的宽度，因此为什么flex-grow似乎不做任何事情，直到您将宽度更改为100%

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
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>