Resize elements within a flex container when using Svelte #if blocks

Question

I am using Svelte and flexbox to to add and remove elements from a container, while dynamically resizing permanent elements inside the container to always take up the remaining space.

I'd like to have added and removed elements transition in and out with svelte "fly."

Here is the problem: the permanent elements jump to their new sizes right away awkwardly rather than animating smoothly along with the entering/exiting elements. How do I make the permanent elements animate as they are resizing?

I know this can be done with animate "flip" but that is only allowed within an #each block. I am hoping to use #if bocks to control elements entering and exiting.

I have a repl with a sample, but I'll also show the code below.

JS

import { fly } from 'svelte/transition'
let add = false;

HTML

<main>
{#if add}
    <div transition:fly="{{ y: -200, duration: 2000 }}" class='box' id='add'>
        Added element
</div>
{/if}

<div class='box' id='permanent'>
    I would like this element resize smoothly when a new elements is added to the parent container.  Can I do this without an each block, though?
</div>

<button on:click={() => add = !add}>
    {add ? 'Remove ' : 'Add '} element
</button> 

CSS

main {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box {
    border: 1px solid black;
    min-height: 50px;
}

#permanent {
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}