親要素に `min-height` しかない場合、子要素に対して `height: 100%` が機能しないのはなぜですか?

親に min-height/max-height しかない場合、子の高さが 100% であるにもかかわらず失敗する理由

指定された HTML スニペットでは、min-height を持つ親コンテナ要素: 300px で、明示的な高さの値がない場合、子要素の高さ: 100% は失敗します。

動作

CSS 仕様によると:

「高さのパーセンテージを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが指定されていない場合、 明示的に指定 (つまり、コンテンツの高さに依存します)、この要素は絶対的に配置されていないため、値は次のように計算されます。 'auto.'"

提供されたシナリオでは、コンテナ要素の高さは明示的に定義されていません。代わりに、その内容と最小高さの値に基づいて決定されます。その結果、子要素の高さ: 100% を正確に計算できません。

明示的な高さの要求

コンテナに高さの値が設定されている場合、たとえ 1px であっても、明示的に高さの値が設定されます。含まれるブロックの高さを定義します。これにより、子要素の高さ: 100% が正しく計算されて適用され、明示的に高さを設定しなくてもコンテナ全体が満たされます。

代替アプローチ

子要素が満たされることが望ましい動作の場合親の高さに関係なく親要素全体を表示するには、次のような CSS フレックスボックスを使用する方法もあります。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  height: 100%;
}

以上が親要素に `min-height` しかない場合、子要素に対して `height: 100%` が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。