这对我很有效：

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';

另请参阅：How can I force WebKit to redraw/repaint to propagate style changes?

为了在Chrome中工作，它需要刷新或某种回流。DEMO
如果您使用脚本强制重新计算主容器，那么您就有了一些可以工作的东西。（这看起来像是Opera的一些非常老的bug）
为了做到这一点，我们可以从位置静态切换到相对，并使用伪插入一些内容。
CLASS Package 器变成了一个ID，可以通过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更新

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更新：

#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;
}

实际上，对于.hidden和pseudo，只需执行以下操作：

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

尝试为列设置height: 100%

我通过在flex容器的子容器上设置height: max-content来解决这个问题