Questions about min-height and height?

height of div1 Why are the heights of sp1 and sp2 not propped up after setting min-height ? Why do sp1 and sp2 hold up when div1"s min-height is changed to height ? Can"t min-height be used instead of height? 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    -sharpdiv1{width: 100%;min-height: 50px;background-color: yellow;}
    -sharpsp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}
    -sharpsp2{width: 50%;height: 100%;display: inline-block;background-color: red;}
    </style>
</head>
<body>
<div id="div1">
    <span id="sp1">aaa</span>
    <spanv id="sp2">bbb</span>
</div>
</body>
</html>
Html css html5
Apr.05,2021

when min-height is set but height is not set, height and min-height of the child element will not take effect height or min-height of the
child element, based on whether the parent element has a fixed height or an effective percentage height

.

reference:
the percentage of height to min-height and the layout method of filling the screen
ide-parent-with-min-height-100-not-inheriting-height" rel= "nofollow noreferrer" Child inside parent with min-height:

min-height indicates the minimum height of the box, not the final height of the box. From the point of view of the outer box, it is understood that the outer final height is determined by the height of the inner elements of the box and the minimum height of the current box.
does not know its own height when the external box waits for the internal element to calculate the height, and the external height is unknown when the internal box height is set relative to the external box, so it is rendered according to its own content, and the final effect is that the height of the internal box has nothing to do with the outside. Under

mark, there is also this question

there may be the following questions
1 the IE, you use I remember IE8 or 6 does not support min-height
2 min-heihgt is set to a percentage? If you set the percentage to give the parent element a height

Congratulations on finding an ancient bug
https://bugs.webkit.org/show_.
ide-parent-with-min-height-100-not-inheriting-height" rel= "nofollow noreferrer" > https:/ / stackoverflow.com/que.
has not been fixed so far

min-height is the minimum height of this element you set. Because the size of the container in the browser may be enlarged by the contents in it, setting this property will ensure that your layout is correct, because it will not be less than the value you set

2019, and has not yet been fixed

.

Previous: How to get all the child nodes except the first child node

Next: How the redux subcomponent gets the action? bound by the bindActionCreators method

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b33510-2be9c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b33510-2be9c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?