min-heightやmax-heightの意味が今更ですがわかりません

Question

例えば以下のようなコードを指定した場合の実際の効果がわかりません。
解説も読んだのですが例えばmin-height以下の高さにはならなように読めるのですがwindowをリサイズした場合に100px以下になると隠れていくのかと思ったのですが、実際やってみるとそのような挙動でもありません。

どなた、max-heightとの違いも含めて、実際の動作をわかりやすく教えていただけませんでしょうか？

 <div class="wrapper">wrapper</div>

.wrapper{
  background:red;
  min-height:100px;
}

Answer 1

簡単に確認ツールを作ってみました。
ブロック要素（HTML5で呼称は廃止されているがCSSとの兼ね合いのため、この表現を使います）も中身が何もなければ、heightの初期値は0になります。それが、min-height: 100px;によって、高さが100pxになります。
もし、要素の高さが100px以上だったらその高さが適応されます。

max-heightも同様の挙動です。

確認ツール

Comments

[kyoya0819]

ちなみに確認ツールの右下にある数字は黄色い要素の高さをリアルタイムで表示しているものです。

（リサイズ発火じゃなくてsetIntervalなのはご愛敬

[pegy]

コメントありがとうございます。
しかしながら、codepenがエラーで見れません。。。
中身があるか否かの問題なのでしょうか？
「要素の高さが100px以上だったらその高さが適応されます。」
これは親要素の高さをさしてい流のでしょうか？動きも試しているのですが再現できず重ねて申し訳ございません

[kyoya0819]

修正しました。再度ご確認ください。

[pegy]

確認しました、ありがとうございます。
何をしても常に100pxの高さが維持されていますが、どうしたら100px以上になりますでようか？
環境は以下の通りです
MacBook Air (11-inch, Mid 2013)
Google Chrome
バージョン: 78.0.3904.108（Official Build） （64 ビット）

[kyoya0819]

回答文にもありますが、中身がない = height: 0;の状態だからです。

全ての環境からこの場合のheightは100pxで見えます。
本来、min-heightはheightと併用して使うものです。

[pegy]

ありがとうございます。理解することができましたあ