Min-height and height?

  html5, question

Why is the height of div1 set?min-heightAfter sp1 and sp2 height did not hold up? Why did you put div1’smin-heightChange toheightAfter sp1 and sp2 are propped up? Can’t min-height be used instead of height?
图片描述
图片描述

<!  DOCTYPE html>
 <html>
 <head>
 <title></title>
 <style type="text/css">
 #div1{width: 100%;  min-height: 50px;  background-color: yellow;  bracket
 #sp1{width: 20%;  height: 100%;  display: inline-block;  background-color: blue;  bracket
 #sp2{width: 50%;  height: 100%;  display: inline-block;  background-color: red;  bracket
 </style>
 </head>
 <body>
 <div id="div1">
 <span id="sp1">aaa</span>
 <spanv id="sp2">bbb</span>
 </div>
 </body>
 </html>

The parent element is setmin-heightBut there are no settingsheightWhen, the child element’sheightAndmin-heightWill not take effect
Of child elementsheightOrmin-heightWhether it is effective depends on whether the parent element has a fixed height or a valid percentage height.

Reference:
Percentage of height and min-height and Layout Method of Covered Screen
Child inside parent with min-height: 100% not inheriting height