JSFiddle - React, Tailwind, and code Playground

by fewerflatlands

HTML

<ul id="container">
    <li class="item">item 1 - parent is visible. outerWidth() correctly calculates my width, including my border</li>
</ul>

<ul id="container2">
    <li class="item">item 2 - parent is hidden. outerWidth() represents my base width, but doesn't include my border width</li>
</ul>

CSS

#container2 {
    display: none;
}
.item {
    float: left;
    width: 224px;
    border-right: 5px solid #000;  
}

JavaScript

$(document).ready(function(){
    $('.item').each(function(){
       alert($(this).outerWidth(true));
    });
});