Home/ Questions/Q 1114353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T02:59:38+00:00

I’m sorry if this is an old issue or a known problem, but I

  • 0

I’m sorry if this is an old issue or a known problem, but I haven’t been able to find an answer online. If I have the code

<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>

Then in firefox the black inner div shrinks as the screen shrinks and stops at 200px height. However in a webkit browser the red outer div stops but the inner div continue to shrink as if it was in a parent div without the min-height attribute.

Is there an easy fix to bring the webkit version into line with the firefox rendering? A min-height:inherit works if placed on the inner div, but in the case of many divs within one this would require min-height:inherit on each child div. Are there any more elegant solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, this is a WebKit bug, bug 26559.

    height in % on static-or-relative-positioned elements is calculated relative to the containing block’s stated height property, instead of the calculated height taking min-height and max-height into account. The same does not occur for width.

    You can sort of see where this comes from in CSS 2.1 which states that the height of a containing block must be explicitly set in order for % to work. But it’s not explicitly stated what ‘explicitly’ means! Browsers have taken this to mean that the height property must be set to a non-auto value, which is fair enough except that height isn’t all there is to height now. Other browsers allow min-height/max-height to affect the height to be used, but don’t allow it to mean ‘explicit’. WebKit goes farther (and this definitely isn’t mandated by spec) by using only height in the calcation and not min/max.

    As a workaround, you could try absolute positioning, which isn’t affected. Relative-position the outer div, absolute-position the inner at left: 0; top: 0; width: 100%; height: 100%.

    • 0