Nested Min-Height Not Working When Both are Percentages [duplicate]

 

Questions


This question already has an answer here:

It seems that once a container div is set with the min-height property as a percentage, height and min-height no longer work with inner div’s using percentages.

The code is below…(everything working as expected):

         html,body{
         height:100%;
         background:black;
       }
       .container{
         height: 30%;
         background-color: green;
        }
       p{
        min-height:90%;
        background-color:purple;

        }

<!DOCTYPE html>
     <html>
      <head>
       
      </head>
     <body>
     <div class="container">
       <p>The minimum height of this paragraph is set with percentage</p>
     </div>

     </body>
    </html>

When I set the container div to a min-height percentage, the purple paragraph shrinks down. I was expecting the paragraph to stay 90% of the containing div. The only thing different with this non-working version is I set “height” to “min-height” for the container div.

         html,body{
         height:100%;
         background:black;
       }
       .container{
         min-height: 30%; /* LINE CHANGED */
         background-color: green;
        }
       p{
        min-height:90%;
        background-color:purple;

        }

<!DOCTYPE html>
     <html>
      <head>
       
      </head>
     <body>
     <div class="container">
       <p>The minimum height of this paragraph is set with percentage</p>
     </div>

     </body>
    </html>

Any help or insight into what is going on would be greatly appreciated. I really want to be able to do this: this is part of a more complex design..I just watered it down to basics for the question…

 

 

————————————————-

Answer

Currently we have the same issue faced by many of them and we have open bug also

https://bugs.webkit.org/show_bug.cgi?id=26559

body,html tag height 100% = 662
container div height is 30% of 100 = 0.3 * 662 = 198
p tag is taking 30% * 30% of container class which is 0.3 * 0.3 * 198 =18.

My suggestion is to put

position: relative to .container class
position: absolute to p tag

I hope so this is useful

css,html

[], []

Facebook Comments

Post a comment