试图将Freewall网格布局放入弹出模式窗口

Question

我有一个页面，图像链接到模态弹出窗口（Magnific Popup），这部分工作正常。我将flex-grid.html布局放在模态元素中：http://github.com/kombai/freewall/tree/master/example

以下是我页面中代码的一部分：

<!-- Modal Popup
 --------------------------------------------------------------- -->

<div id="modal-01" class="popup-modal mfp-hide">
  <div class="link-box"><a class="popup-modal-dismiss"><i class="fa fa-times"></i></a></div>
  <div id="freewall" class="free-wall"></div>
  <script type="text/javascript">

        var temp = "<div class='brick' style='width:{width}px;'><img src='wall/images/photo/{index}.jpg' width='100%'></div>";
        var w = 1, h = 1, html = '', limitItem = 49;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.brick',
            animate: true,
            cellW: 200,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
            }
        });

        var images = wall.container.find('.brick');
        images.find('img').load(function() {
            wall.fitWidth();
        });

    </script> 
</div>
<!-- modal-01 End -->

不幸的是，当我点击图片时，我只能看到空的模态弹出框：

但如果我移动/调整浏览器窗口大小，模态窗口内的所有内容都会成功显示：

我非常确定问题在于对Freewall flex-grid布局元素进行了一些调整，但我无法找到哪一个。实际上＆＃34; fit-zone.html＆＃34; Freewall示例列表中的布局与模态弹出窗口完全一致，但我更喜欢flex-grid.html。