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

Question

我在 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 中工作。其他浏览器显示正常。

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

Answer 1

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

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