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

EDITED

Ширина всех элементов li не может быть получен, так как они находятся на display:none;.

Я сделал что-то с your Fiddle ...
Вы сможете продолжить стилизацию. ;)