Question

I’m making a fully-flex, percentage based layout.

It has a Nav bar on the left hand side which switches from full mode to a small mode – in order to achieve this (as the nav is absolute positioned) I’m adding padding on the wrapping div for the main content, as a way of resizing the inner content.

I’ve added a quick jQuery function to do this, but when I click it in Chrome, the main content breaks out of it’s container – the container doesn’t resize back to 100% width.

This only seems to be happening in Chrome – does any one know why, or what I can do to counter it?

The site can be found here:
http://dev.barringtonmedia.co.uk/test/layout.html

The problem can be seen in the following images:

Created a jsfiddle with it, if you fancy a play:
http://jsfiddle.net/Dycd4/

Answer 1

I’ve seen this problem several times now.

The fix from my answer here works: jQuery CSS rendering – works in Firefox, not in Chrome

Here it is applied to your code: http://jsfiddle.net/thirtydot/Dycd4/1/