Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない

#状況

display:grid が付けられた form 要素の直下ではない textarea でwidth: 100%やmax-width: 100%などを付けても、form 要素をはみ出てしまう。

<style>
  form {
    display: grid;
    max-width: 400px;
  }
  textarea {
    field-sizing: content;
    width: 100%;
  }
</style>
<form>
  <textarea>入力文字列がform要素の幅を超えると自動的に改行される</textarea>
  <div>
    <textarea>ここは入力文字列の長さに応じて、はみ出る</textarea>
  </div>
</form>

次の状況では、発生しない。

• Grid コンテナ直下の textarea である。
• Form 要素が Grid ではなく Flexbox または、ただのブロックコンテナである。

#考察

• aspect-ratio が付いた要素や、スタイルをリセットしていない Form 関連要素が、Grid コンテナ内ではみ出てしまうケースと同様だと思われる。
• 実際に、textarea の親である div 要素にmin-width: 0pxを付けると、この問題は解消する。

よって、次のような状態であると推測できる。

• grid-template-columns が指定されていないため、grid-template-columns: 1frと同じ。
• 1fr は minmax(auto, 1fr)として解釈されるため、grid-template-columns: minmax(auto, 1fr)を指定している状態と同じ。
• auto が解釈する大きさが、1fr を超えているため、Grid コンテナから要素がはみ出てしまう。

#解決策

次のいずれかで解消する。

実験：https://stackblitz.com/edit/js-xczysq?file=style.css

form {
  display: grid;
  grid-template-columns: minmax(0px, 1fr);
  max-width: 400px;
}

form {
  display: flex;
  flex-direction: columns;
  max-width: 400px;
}

form > div {
  min-width: 0px;
}