0

I hope someone can help me, thank you.

There is a similar problem Why's CSS percentage (%) height applied to grand-child of flex element?, but it is not quite the same as my problem. My problem is: the parent element ".box" of the ".item-1" element did not set a height, why does the height percentage of ".item-1" work?

Below is the reproducing code： CodePen

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高度百分比-工作</title>
  </head>
  <body>
    <style>
      .wrap {
        background-color: #888;
        display: flex;
        align-items: normal;
      }

      .item-1 {
         background-color: pink;
         width: 100px;
         height: 10%;
        /* Take effect  height=400*10% = 40 */
        /* The expected height percentage does not work, that is, the 
           final height of ".item-1" is 0. */
      }
      .item-2 {
        height: 400px;
        width: 200px;
        background-color: skyblue;
      }
    </style>
    <div class="wrap">
      <div class="box">
        <div class="item-1"></div>
        <div class="item-2"></div>
      </div>
    </div>
  </body>
</html>
FanYa
  • 1
  • 1
  • Not a fix but note that the [](https://html.spec.whatwg.org/dev/semantics.html#the-meta-element) tag does not use and does not need a closing slash and never has in any HTML specification. – Rob May 31 '23 at 07:14
  • 1
    The question you linked is what you need to understand. The answer is "stretch alignment". This default alignment allow percentage height to be resolved exactly the same as the other question (no need any defined height anywhere). In your case, it's item2 that defines the reference height to be used – Temani Afif May 31 '23 at 08:36
  • @TemaniAfif Thank you very much. I wonder if there are any related standards for this, such as W3C? – FanYa Jun 02 '23 at 07:49
  • in the duplicate, I am quoting the specification that describe such behavior – Temani Afif Jun 02 '23 at 07:53

1 Answers1

-1

This thing tends to get a little complex to understand but bear with me. By default, the CSS element's height is set to auto, which means that its rendered height will be defined by the height of the elements that are inside of that element, in this case div.

Now, if you set the height to 100% or x% you are setting a relative height. Now, the height instead of being defined by the elements contained inside is defined by the parent element's height. It is important to note that the relative height is relative to the closest-positioned element, i.e. the .box class element. Now, since you explicitly defined the item-2 height as 400px that gave the browser something to consider as a standard. Using that 400px, the browser defined the .box height as 400px, and in turn defined the .wrap height as the height of .box, i.e. 400px. Now, because the height of item-1 is 10% (relative height), it has the .box height to take as a standard and sets it to 40px.

I encourage you to test this out, try modifying the value of .item-1 height to an absolute value like 100px, and the div will now take the height of 500px (100+400) because nothing is relative, everything is absolute.

I know this isn't the best of explanations, but I will be happy to answer any follow-ups.

Chinmay
  • 159
  • 9
  • I am lost in your explanation. Why is 'everything absolute' at that point? And where is there any positioning of a parent? – A Haworth May 31 '23 at 07:48
  • Thanks for your follow-up @AHaworth. I apologize if I couldn't make the explanation simpler. Answering your questions in order. Firstly, the last example involves a sum total of 500px height, which is just an illustration that the parent div takes in the height of the child components only when their heights are defined explicitly, rather than in a relative manner as a fraction. Secondly, the position might not have been explicitly defined in the style property, but is is set to `static` by default which means it follows the flow of the elements as coded in by the user. Hope that makes sense. – Chinmay May 31 '23 at 18:53
  • @Chinmay Thank. According to your answer, can you take a look at this [DEMO](https://codepen.io/eoscshbd-the-decoder/pen/XWxvNXP)? The only difference from the question is that .wrap does not use display: flex; – FanYa Jun 02 '23 at 08:20