How can I dynamically find the height of a flexbox item, as the window resizes, with jquery, and use it to dynamically add height with an animation?
<p>I am using a flexbox to create my vertical navbar. Here is the relevant HTML for it:</p>

<pre><code>&lt;div id="navbar"&gt;
    &lt;div class="nav-pill"&gt;About Me&lt;/div&gt;
    &lt;div class="nav-pill"&gt;Awards&lt;/div&gt;
    &lt;div class="nav-pill"&gt;Hobbies&lt;/div&gt;
    &lt;div class="nav-pill"&gt;Coding YT&lt;/div&gt;
    &lt;div class="nav-pill"&gt;Social Media&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the relevant CSS for it:</p>

<pre><code>.nav-pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</code></pre>

<p>I want my <code>nav-pill</code>s to grow my 10px whenever a mouse hovers on it. Since the flexbox adjusts it's size based on screen size, I can't animate with static values. So, I tried to do this:</p>

<pre><code>var navPillHeight = $(".nav-pill").height();
var navPillWidth = $(".nav-pill").width(); 

$(".nav-pill").mouseenter(function () {
    $(this).animate({
        height: (navPillHeight+10)+"px",
        width: (navPillWidth+10)+"px",
    }, 200);
}).mouseleave(function () {
    $(this).animate({
        height: navPillHeight+"px",
        width: navPillWidth+"px"
    }, 200);});
</code></pre>

<p>But, for obvious reasons it wouldn't resize when the screen resized. So, I tried to do this: </p>

<pre><code>function navPillResize() {
    var navPillHeight = $(".nav-pill").height();
    var navPillWidth = $(".nav-pill").width(); 

    $(".nav-pill").mouseenter(function () {
        $(this).animate({
            height: (navPillHeight+10)+"px",
            width: (navPillWidth+10)+"px",
        }, 200);
    }).mouseleave(function () {
        $(this).animate({
            height: navPillHeight+"px",
            width: navPillWidth+"px"
        }, 200);
    });
}

$(window).resize(navPillResize);
</code></pre>

<p>But, this did not work either, although the variable values did change. Does anybody have any solutions to this problem? Anything would help.</p>

<p>Thanks so much!</p>