图像在项目flex中自动调整大小

Question

我有以下代码：

<ul style="display:flex">
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

每个项目flex都有这个css：

@media (max-width: 767px) {
    *:not(.bx-viewport) > ul.product_list.grid > li {
    -webkit-flex: 1 1 208px;
    -ms-flex: 1 1 208px;
    flex: 1 1 208px; } }

@media (min-width: 768px) {
    *:not(.bx-viewport) > ul.product_list.grid > li {
    -webkit-flex: 1 1 220px;
    -ms-flex: 1 1 220px;
    flex: 1 1 220px; } }

每个项目flex的最大宽度加载到一个javascript函数中，该函数在页面启动时执行，除了ul的第一个子项，如下所示：

li:first-child {
    max-width: 450px !important; 
}

$(window).load(function() {
    $(this).children().removeAttr("style");
    var maxWidth = $(this).children().first().width();
    $(this).children().css("max-width", maxWidth);
});

问题是这些项目以一个宽度显示，然后自动调整大小到正确的大小，显示我不想要的效果（在链接中你可以看到带有gif的错误）。任何人都可以帮助它显得很好吗？