container height in % does't work even it is block

Question

I created a container that containes a grid. When i try to change the height of container in % but it does't work. Why height does't works ( In % ) ? But in other units it works like px, vh or any other units. I am curious about why height in % does't works. Please anyone help .

<CSS>

 <style>
    .container {

      width: 60%;
      background-color: red;
      margin: auto;

    }

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .left {
      background-color: antiquewhite;
    }

    .right {
      background-color: powderblue;
    }

    .content {
      margin: auto;

      display: grid;
      grid-template-columns: repeat(2, 40%);
    }
  </style>

<div class="content">

  <div class="left">

    <img
      src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
      alt="product">

  </div>

  <div class="right">

    <span class="overline">I-phone</span>

    <h2 class="product-name">I PHONE 13 PRO-MAX</h2>
    <p class="product-desc">
      I phone 13 pro max is the new product in markete.
      This phone has lots of amazing features.
      Many outstanding tasks can be performed with this.
    </p>

    <div class="footer">

      <h3 class="curr-price">$1000</h3>
      <span class="actual-pricce">$1500</span>

    </div>
  </div>

</div>

```

container height in % does't work even it is block

0 Answers0