Question

Update: added css transitions on fiddles to make it clearer

When the padding is removed from this div via javascript, Chrome doesn’t resize the content to fit (i.e., the red div doesn’t cover the yellow, it stays the same size):
http://jsfiddle.net/XDchs/4/

Likewise, if padding is added, the content is pushed outside of the div:
http://jsfiddle.net/XDchs/3/

Firefox resizes as I’d expect. Does anyone know why, and how to fix it?

HTML:

<div id="outer">
  <div id="inner">
    <div id="content">blah</div>
  </div>
</div>

CSS:

#outer {
  background-color:blue;
  width:300px;
  margin:0 auto;
}
#inner {
  padding-left:100px;
  margin:2px;
  background-color:yellow;
  -webkit-transition:padding-left 2s;
  -moz-transition:padding-left 2s;
}
#inner.no-padding {
  padding-left:0;
} 
#content {
  background-color:red;
}

JavaScript:

$(document).ready(function() {
  $("#inner").addClass("no-padding");
});

Answer 1

I ended up fixing this by setting the content’s width to 100% via javascript after adding the CSS class: http://jsfiddle.net/XDchs/6/

$("#content").width("100%");

I couldn’t find a CSS solution that completely worked.

Also, I filed this as a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=171060