javascript - Jquery 计算正确的容器大小

Question

关于我之前的一个问题 here和答案here我发布了这个新问题，因为这与 Javascript 更相关。

Checkout my fiddle here

我想用 CSS flex 创建一个下拉菜单。我正在努力让容器 div 与列一样宽。使用下面的代码，列表中最后一项完全离开的计算是错误的。看起来它正在计算到上一列的距离。

所以我有的是

<div class="cats">
    <ul>
        <li class="item sub">
            <a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
            <div class="subnav">
                <ul class="flex-wrap">
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                    <li class="subitem">
                        <a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a>
                    </li>
                    <li class="subitem">
                        <a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                <ul>
            </div>
        </li>
    </ul>
</div>

.cats .subnav {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  display: none;
  margin: 0;
  padding: 30px;
  position: absolute;
  text-align: left;
  z-index: 99;
}
.cats .item.sub:hover .subnav {
  display: block;
}




.subnav .wrap{
            display:inline-flex;
            flex-flow : column wrap;
            align-content : flex-start;
            height : 350px;
            background : blue;
        }
.subitem{
    width : 150px;
    height:100px;
    background : red;
    margin : 20px;
}

$(document).ready(function() {
    $('.flex-wrap').each(function(index) {
        var lastChild = $(this).children().last();
        var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
        $(this).width(newWidth);
    });
});

以这种方式使用它时，它看起来像是在计算到前一列的距离。所以像 200px 而不是 600px。这可能是由定位引起的，还是我做错了什么我现在完全忽略了？

Answer 1

已编辑

无法获取所有 li 元素的宽度，因为它们位于 display:none;。

我用 your Fiddle 做了一些东西...
您将能够从这里继续造型。;)