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

状況#

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

1
<style>
2
  form {
3
    display: grid;
4
    max-width: 400px;
5
  }
6
  textarea {
7
    field-sizing: content;
8
    width: 100%;
9
  }
10
</style>
11
<form>
12
  <textarea>入力文字列がform要素の幅を超えると自動的に改行される</textarea>
13
  <div>
14
    <textarea>ここは入力文字列の長さに応じて、はみ出る</textarea>
15
  </div>
16
</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

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

1
form {
2
  display: flex;
3
  flex-direction: columns;
4
  max-width: 400px;
5
}

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