Css – Percentage padding behaves unexpectedly in Firefox

cssfirefoxpage-refreshresponsive-design

I'm experiencing strange behavior in Firefox (v35 v39 v52) regarding percentage padding. I cannot reproduce this issue in Chrome.

I have an element with top padding set as a percentage, like this:

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

Percentage padding on an element is relative to its parent's width. So, I expect that the padding at the top of the element will grow as the window's width is enlarged. This is indeed the result for my simple <p> tag.

However, when that element is floated or has width, the percentage padding does not behave as expected when the window is resized. The padding is calculated correctly upon load. But, as the window is resized, the total height of elements that are floated or have width seems to remain the same. Text in the element is inexplicably placed at the bottom of an area that gets mysterious height. This happens for elements like this:

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    float:left;
}

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    width:150px;
}

Here is an image to illustrate what I'm seeing. Color coding is added by Firebug; purple is padding, yellow is margin, and blue is the content of the element.

illustration of percentage padding problem in firefox

What causes this inconsistency? Can anyone else reproduce this issue in Firefox (or any other browser)?

Here's a fiddle to demonstrate. In Firefox, try expanding or contracting the result pane to see the elements resize.

I have not added a runnable code snippet, as I couldn't find an easy way of resizing the snippet area on-the-fly.

I've added a stack snippet to demonstrate the issue. Use the "Full page" button so you can stretch the window's width.

html,body {
  margin: 0;
}
div#container {
  width: 100%;
}
p {
  padding: 10% 0 0;
  margin: 0 0 1em;
  background-color: #CCC;
}
p.width_limited {
  width: 150px;
}
p.floated {
  float: left;
}
<div id="container">
  <p>NORMAL</p>
  <p class="floated">FLOATED</p>
  <div style="clear:both;height:0;"></div>
  <p class="width_limited">HAS WIDTH</p>
</div>

Best Answer

That's strange. I'm not sure if it is a bug. But, by changing the display to flex seems to solve the problem. http://jsfiddle.net/vsvp71rw/4/

p {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}
Related Topic