使用 jquery 的 Chrome 上的 Flex 无法正确呈现

Posted 2023-05-08

【中文标题】使用 jquery 的 Chrome 上的 Flex 无法正确呈现

【英文标题】：Flex on Chrome using jquery does not render properly

【发布时间】：2018-10-09 00:10:22

【问题描述】：

我在 chrome 中遇到了某种类型的错误。在使用 jQuery 添加元素的嵌套 flex 中，布局无法正确呈现，直到在开发工具中单击关闭和打开任何 css 参数。我还没有找到在代码中复制开发工具复选框的方法。使用 javascript 更改 css 不会做任何事情（我尝试过 jQuery.css()、elem.style、jQuery.addClass()，并将 style 标记附加到头部）。

我在这个问题上尝试了解决方案，但没有运气： Why does Chrome not properly handle flexbox items added with jQuery?

使它看起来正确的唯一方法是更改​​开发工具中的参数，或者最大化/最小化 chrome 窗口。我不在乎解决方案是否有问题，我只想让它在 chrome 中工作。其他浏览器显示正常。

当我在开发工具中禁用和启用正文宽度时，我附上了显示正在发生的事情的图像。

【参考方案1】：

经过研究，我找到了一个解决方案 - 将以下内容添加到嵌套的 flex-container 的孩子中：

min-height: 0;
min-width: 0;