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

In order to work in Chrome, it needs a refresh or some kind of reflow. DEMO

If you script force the main container to be recalculated, you have something that works. (this looks like some very old bug of Opera)

In order to do that, we can switch from position static to relative and use a pseudo to insert some content.

CLASS wrapper becomes an ID to easily select it via JavaScript

<div id="wrapper">
    <div class="column1">This column Has some content</div>
    <div class="column2">This column also has some content
        <div id="contentToHide">
            <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
        </div>
    </div>
</div>
<button id="removeButton">Remove Content</button>
<br/>
<button id="addButton">Add Content</button>

javaScript update

document.getElementById('removeButton').addEventListener("click", function (event) {
    document.getElementById('contentToHide').classList.add("hidden");
    document.getElementById('wrapper').classList.add("prelative");
});

document.getElementById('addButton').addEventListener("click", function (event) {
    document.getElementById('contentToHide').classList.remove("hidden");
    document.getElementById('wrapper').classList.remove("prelative");
});

CSS update:

#wrapper {
    display: flex;
    width: 400px;
    margin-bottom: 30px;
}
.column1 {
    padding: 10px;
    background: #DDD;
}
.column2 {
    padding: 10px;
    background: #EEE;
    width:50%;
}
#contentToHide.hidden {
    display: none;
}
.prelative {
    position:relative;
}
div:before {
    content:attr(class);
    left:-9999px;
    position:absolute;
}

---

Actually, for .hidden and pseudo you can just do :

#contentToHide.hidden ,
div:before {
    content:attr(class);
    left:-9999px;
    position:absolute;
}

Answer 2

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?

Answer 3

Try to set height: 100% for columns

Answer 4

I solved this by setting height: max-content on the children of the flex container