内容更改时，Flexbox高度不会更新

Question

chrome中的flexbox似乎存在一个问题，它会影响可变高度的列。当这些列的内容发生更改时，列应调整大小，但不会

我在这里创建了一个JS小提琴 - http://jsfiddle.net/KVQTd/2/

点击“删除内容按钮”即可查看我的意思。

这是使用flexbox创建列的最简单示例，以演示没有其他因素导致它。

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

.column1{
    flex: 1;
}

.column2{
    flex: 1;
}

我很确定这是Chrome中的一个错误，因为当您进入开发人员工具并关闭并再次开启时，它会正确计算高度。

我已在此处提交了错误报告 - https://code.google.com/p/chromium/issues/detail?id=369869&thanks=369869&ts=1399226675 -

...但我没有时间等待新版本的Chrome发布，所以我希望有人能够想到一个聪明的解决方案。也许是某种观察内部内容高度并调整强制重新计算弹性箱高度的javascript？

Answer 1

要在Chrome中工作，需要刷新或进行某种重排。的 DEMO

如果脚本强制重新计算主容器，则可以使用某些功能。 （这看起来像Opera的一些非常古老的错误）

为了做到这一点，我们可以从position static切换到relative，并使用pseudo来插入一些内容。

CLASS包装器成为一个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和伪，您可以这样做：

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

Answer 2

这对我有用：

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?

Answer 3

尝试为列

设置height: 100%