親要素に `min-height` しかないのに、子要素が高さを継承しないのはなぜですか?

親の min-height/max-height および明示的な高さが適用されない子要素の高さ

問題:

次の CSS を考えてみましょう:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

子要素にもかかわらず高さが 100% に設定されている場合、親要素に min-height 値があっても明示的な高さがない場合、高さはまったく占有されません。親要素の高さが偶数の 1px に設定されている場合にのみ、子要素がコンテナに正しく収まります。

説明:

最初のケース (親)、子の高さのパーセンテージは次の理由で失敗します:

CSS によると仕様:

"含まれるブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対的に配置されていない場合、値は 'auto' に計算されます。"

Min-height は最小境界を提供するだけであり、要素の高さは依然としてそのコンテンツに依存します。

説明のために、次の変更されたものを考えてみましょう。例:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  padding: 10px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

ここでは、コンテナは明示的に小さいパディングを設定し、子要素の max-height が 300px よりも小さくなるように強制します。アニメーションは子の高さを動的に変更し、子の高さが 100% の高さ設定だけではなく、実際に利用可能なスペースに依存することを示しています。

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