Percentage Max-Height on Image Ignored in Firefox

percentage max-height on image ignored in firefox

It understands it the way the W3C specifications state. For max-height to work, something other than the content itself needs to be explicitly setting the height of its containing element. This is why when you set height: 100% it works, because now you are explicitly telling .article to take its height from its parent (rather than its content). But when you have .article set with max-height, then it is still the content driving its calculated height, just with the limitation of not sizing past the .container height. And in your case, the content is the img itself.

In this fiddle, you can see that the .article is in fact constraining itself to the height of .container, but is allowing the content of itself (the img) to overflow to a larger height. The img is not constrained by its max-height because .article does not have an explicit height set, but is in fact getting its height from the img (only it is limited that it cannot go past the height of its container).

Image mysteriously ignoring max-width in Firefox & IE

You have max-width: 100%, but 100% of what? Of the parent width, right? But the parent is an inline-block (with class="sponsor") whose width is not set, so its width depends on the children, and in particular on the preferred width of the children.

The layout of this styling is undefined in the CSS specification. In particular, the intrinsic width of the kids in this case depends on the width of the parent which in turn depends on the intrinsic width of the kids. See http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the relevant spec text and note all the "does not define" bits.

I recommend giving your <div class="sponsor"> a width. That should deal with the problem, I would think.

max-height / max-width doesn't function in firefox and ie

The problem is that you're assigning the wrong values to those properties. You're setting the width, for example, to "100%". That percentage refers to the width of the container element, whose width is that of the whole window. The photo, which is offset on the left by that huge arrow thing, therefore spills off the screen to the right.

You should just use Firebug to play with the property values to come up with something appropriate. You should consider using a percentage to size the arrow control too.

Img's max-height not respecting parent's dimensions

I figured it out. For an element's max-height to work, one of its parents must have a height attribute defined (apparently in a fixed unit, like px, not in percentage).

From the w3c specs:

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 (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').

Since none of my img's parent have a fixed height defined, I had to limit my img to max-width instead.

Edit: Also, it seems webkit takes the specs a little too literally: https://stackoverflow.com/a/3808701/857807

I used the workaround presented in that thread, and used position: absolute; max-height: 100%; top: 0.

Heights rendering differently in Chrome and Firefox

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:

• Chrome ignoring flex-basis in column layout
• Chrome / Safari not filling 100% height of flex parent
• Height is not correct in flexbox items in Chrome
• Flexbox in Chrome--How to limit size of nested elements?

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.

Why is percentage height not working on my div?

Use vh (viewport height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.

height:90vh;

try this code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
    <div id="tabs" ng-controller="TabsDataCtrl">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>

            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers"></leaflet>
    </div>
    </div>
</body>
</html>

with css

<style>
    #wrapper{height:60vh;}
    #tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
    #leaflet-map{width:78%; height:60vh; overflow-y:scroll;  overflow-x:hidden;}
</style>

Flex elements ignore percent padding in Firefox

See https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

Grid/Flex Percentages

• The group tried to work through how vertical percentage margins
  and paddings are defined.
  
  
  • Note: Top and bottom margins in CSS have traditionally
    resolved against the containing block width instead of its
    height, which has some useful effects but is generally
    surprising. Existing layout modes must of course continue
    to do so.
  • Previous group resolution had been for option 2 (below), but
    Google felt they had new information regarding abspos
    behavior that merited reconsideration.
  • The discussion came down to three potential solutions:
    
    
    • Option 1: Always resolve percents against the width.
    • Option 2: Grid and flex resolve against height, and
      abspos items always resolve against the width.
    • Option 3: Grid and flex, including their abspos items,
      resolve against the height. Abspos elsewhere
      continue to resolve against the width.
  • In a straw poll the group was pretty evenly divided between
    options 1 and 3.
  • Microsoft would object to option 1 and Google to option 3,
    so the discussion reached an impasse and will be continued
    privately during the F2F in hopes of reaching a conclusion.

See https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html,

Flexbox % Follow-Up

• [...] there was still no conclusion.

The current Flexbox spec warns about this:

Percentage margins and paddings on flex items can be resolved
against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height)
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current
state of the world (no consensus among implementations, and no
consensus within the CSSWG). It is the CSSWG’s intention that browsers
will converge on one of the behaviors, at which time the spec will be
amended to require that.

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in
different browsers.

However, more recently the CSS WG resolved (with some controversy):

Both flexbox and grid items top and bottom margin and padding percent resolves against the available inline direction.

See the updated editor's draft.

Image max-width not working in Firefox

Your table needs to be fixed for it to work in firefox:

Updated Fiddle:

http://jsfiddle.net/Q7742/6/embedded/result/

@media (min-width: 1200px) {
    .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

---

Related Topics