Flexbox height not updating when content changes

Question

There seems to be a problem with flexbox in chrome which affects columns of variable height. When the contents of these columns change the column should resize, but it doesn't

I have created a JS fiddle here - http://jsfiddle.net/KVQTd/2/

Just hit the 'remove content button' to see what I mean.

This is the simplest example of using flexbox to create columns to demonstrate that nothing else is causing it.

.wrapper{
    display: flex;
    align-items: stretch;
}

.column1{
    flex: 1;
}

.column2{
    flex: 1;
}

I'm pretty sure this is a bug in Chrome because when you go into developer tools and switch flex off and on again it then calculates the height correctly.

I have submitted a bug report here - https://code.google.com/p/chromium/issues/detail?id=369869&thanks=369869&ts=1399226675 -

...but I don't have time to wait for new versions of Chrome to be released so I was hoping somebody might be able to think of a clever solution. Perhaps some kind of javascript which watches the height of the inner content and adjusts forces a recalculation of the flexbox height?

Answer 1

This works for me:

var elem = document.getElementById("myFlexbox");
elem.style.display='none';
elem.offsetHeight; // no need to store this anywhere, the reference is enough
elem.style.display='flex';

Also see: How can I force WebKit to redraw/repaint to propagate style changes?