css 内容更改时Flexbox高度不更新

trnvg8h3  于 2022-11-19  发布在  其他
关注(0)|答案(4)|浏览(136)

chrome中的flexbox似乎有问题,它会影响可变高度的列。当这些列的内容更改时,列应该调整大小,但它没有
我在这里创建了一个JS小提琴-http://jsfiddle.net/KVQTd/2/
只要点击“删除内容按钮”,看看我的意思。
这是使用flexbox创建列的最简单示例,以证明没有其他原因导致此问题。

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

.column1{
    flex: 1;
}

.column2{
    flex: 1;
}

我敢肯定这是Chrome中的一个bug,因为当你进入开发者工具并再次关闭Flex时,它会正确地计算高度。
我在这里提交了一个错误报告-https://code.google.com/p/chromium/issues/detail?id=369869&thanks=369869&ts=1399226675-
......但是我没有时间等待Chrome的新版本发布,所以我希望有人能想出一个聪明的解决方案。也许某种javascript会监视内部内容的高度,并调整强制重新计算的flexbox高度?

zour9fqk

zour9fqk1#

这对我很有效:

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?

2nbm6dog

2nbm6dog2#

为了在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;
}
oug3syen

oug3syen3#

尝试为列设置height: 100%

qv7cva1a

qv7cva1a4#

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

相关问题