Heights rendering differently in Chrome and Firefox [duplicate]

by

So first you have the W3C standards, which are a set of guidelines for browser makers.

And then you have the browser makers, who are free to do whatever they want (as evidenced by a history of deviations by Internet Explorer).

In particular, with CSS percentage heights, there are clear differences in behavior among browsers.

You’ve posted one example. Here’s another:

Percentage Heights in Flexbox: Chrome/Safari vs Firefox/IE

When working with flexbox, Chrome and Safari resolve percentage heights on flex items based on the value of the parent’s height property. Firefox and IE11/Edge prioritize the parent’s flex height.

It appears Webkit browsers adhere to a more traditional interpretation of the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to “auto”.

auto
The height depends on the values of other properties.

In other words, for percentage height to work on an in-flow child, the parent must have a set height.

That is the traditional interpretation of the spec: The term “height” means the value of the height property. My own view is that this language is vague and open to interpretation, but the height property requirement has become the predominant implementation. I’ve never seen min-height or max-height work on a parent when dealing with percentage values.

Recently, however, Firefox and IE have broadened their interpretation to accept flex heights, as well.

Examples of Firefox and IE using a parent’s flex height as reference for a child’s percentage height:

Knowing which browsers are in compliance with the spec is a bit difficult because, as I mentioned before, the spec language seems vague and open to interpretation.

With the last update to this part of the definition being in 1998 (CSS2), and the advent of new forms of height such as flex height, an update seems long overdue.

I think it’s fair to say that when it comes to percentage heights, until the spec definition gets an update, you can expect rendering differences among browsers.

Alternative Solutions

Here are two alternatives to consider when wanting a child element to take the parent’s full height.

  1. Apply display: flex to the parent. This automatically sets align-items: stretch, which tells the child to expand the full available height of the parent.

  2. Apply position: relative on the parent and position: absolute; height: 100%; width: 100% on the child. With absolute positioning, a percentage height will work without a specified height on the parent.

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Can’t scroll to top of flex item that is overflowing container
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height rows in a flex container
  6. Equal height children of flex items
  7. flex-grow not sizing flex items as expected
  8. How to Right-align flex item?
  9. How to remove the space between inline/inline-block elements?
  10. How to add 1px margin to a flex item that is flex: 0 0 25%?
  11. How can I combine flexbox and vertical scroll in a full-height app?
  12. Keep the middle item centered when side items have different widths
  13. How can I make my flexbox layout take 100% vertical space?
  14. Is there a way to remove a div but keep its elements?
  15. Flexbox alternative for IE9
  16. Prevent flex items from stretching
  17. Flex items not respecting margins and box-sizing: border-box
  18. CSS grid – maximum number of columns without media queries
  19. Make flex items overlap
  20. 5 items per row, auto-resize items in flexbox
  21. Aligning elements left and center with flexbox
  22. Flexbox, z-index & position: static: Why isn’t it working?
  23. Different implementation of Flexbox in Firefox and Chrome
  24. Why does flex-box work with a div, but not a table?
  25. How to make a flex item not fill the height of the flex container? [duplicate]
  26. Can flexbox detect when a flex item wraps?
  27. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  28. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment