＃起源
この記事では、height: 100％;を使用する際に失われる問題について言及されています。具体的には、要素の高さがなく、親要素の高さとは異なることがあります。この問題は私の考えを引き起こしました。
＃探求
この問題を見つけたので、原因を探しに行く必要があります。インターネット上のほとんどの情報を調べましたが、この問題は「高さの計算における無限再帰の問題」として説明されています。つまり、親要素の高さが指定されておらず、子要素によって親要素の高さが確定される場合、別の子要素がheight: 100％;を使用していると、親子間で相互に推測が続き、再帰が発生し、子要素の高さが計算できなくなる問題が発生します。
＃解決策
コンテナの高さを指定する#
現在、最も一般的な解決策は、親コンテナの具体的な高さを指定することです。これにより、再帰現象が発生しないようになります。
上記の例を見ると、「コンテナの高さを指定する」解決策が問題を解決できることがわかりますが、この指定形式は非常に制限されています。一般的に、開発プロセスでは、ほとんどのコンテナが柔軟なサイズを持っているため、この「コンテナの高さを指定する」解決策は適用できません。そのため、以下の「Flex/Grid/-webkit-boxレイアウト」のような解決策が動的な高さの問題を解決できます。Flex/Grid/-webkit-box レイアウト#
これらのレイアウトはすべて、子要素の高さを動的に解釈できる共通点があり、この特性は上記の問題を完全に解決できます。
W3C では、この特性を次のように説明しています。
各フレックスアイテムの使用される交差サイズを決定します。フレックスアイテムにalign-self: stretchがある場合、その計算された交差サイズプロパティはautoであり、その交差軸のマージンがどちらも auto でない場合、使用される外部交差サイズは、フレックスラインの使用される交差サイズであり、アイテムの使用される最小および最大交差サイズによってクランプされます。それ以外の場合、使用される交差サイズはアイテムの仮想交差サイズです。
フレックスアイテムにalign-self: stretchがある場合、この使用サイズをその確定的な交差サイズとして再レイアウトし、パーセンテージサイズの子要素を解決できます。
偶然なことに、flex/gridレイアウトでは、アイテムのalign-selfのデフォルト値がstretchです。
注意：この小見出しでの Flex/Grid/-webkit-box には、flex/inline-flex/grid/inline-grid/-webkit-box/-webkit-inline-box が含まれます
注意：display: -webkit-box; が.line 要素を表示しない場合、ブラウザの互換性の問題です。この例は Google Chrome で開いてください
-webkit-box#
上記でdisplay: -webkit-box;というプロパティが言及されましたが、このプロパティは多くの場所で使用されることに気付きました。例えば、複数行テキストの省略記号や、height: 100％;の問題の解決にも使用されますが、これが一体何なのかを調べることさえしていませんでした。また、このプロパティに関する情報も非常に少なく、最大で **-webkit-box** レイアウトが Flex レイアウトのようなものであるということしか見つかりませんでした。資料を調べるのが少し難しいです。
🐶賢い私は、オンラインの検索エンジンで関連する情報が見つからなかった後、しばらく考えた後、chatgptを見つけ、適切な答えを得ました。
display: -webkit-boxプロパティを使用すると、要素の表示モードがボックスモデルベースのレイアウトに設定されます。このレイアウトは、フレックスボックス（flexbox）レイアウトに似ていますが、古いバージョンの WebKit ブラウザにのみ適用されます。関連するプロパティには、-webkit-box-orient、-webkit-box-pack、-webkit-box-align などがあります。
これらのプロパティは組み合わせて使用し、柔軟なレイアウト効果を実現できます。ただし、-webkit-box プロパティは WebKit ブラウザ固有のものであり、標準の CSS プロパティではないため、現代のブラウザでは正常に動作しない場合があります。さまざまなブラウザをサポートするためには、標準の
display: flexまたはdisplay: gridプロパティを使用して同様のレイアウト効果を実現することをお勧めします。この AI の回答は参考までに
このような回答で、なぜ-webkit-boxもheight: 100％;の問題を解決できるのかが理解できましたが、本当の権威ある解釈などはまだ見つかっていません。もし読者の方がそれを知っている場合は、コメントを残していただければ幸いです。ありがとうございます。
＃参考資料