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>
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

.
Menu