http://codepen.io/anon/pen/wBxZRZ
http://jsfiddle.net/Lc6f1ebL/2/
I am trying to create a container, its position is absoluted, and some dynamic inner contents(div blocks) will be appended to it from time to time. I want this container’s width to be extended accordingly. For example, ‘.inner’ now has 5 children divs, and its width is 500px. When an identical ‘.box’ div is appened to ‘.inner’, ‘.inner’s width should be 600px. Of course, these widths are also dynmaic.
It seems to me this can easily (or only) be done by using flex display, but I’m having a cross-browser issue. In IE, the flex-container ‘.inner’s width is confined within its parent, thus its width is not numberOfChildren * Children’s width. Is there anyway to overcome this?