Html/css kleep parent element of sticky element on screen // Shrinking header with variable height

Question

i like to make a Website with a sticky header/navbar. The header is made of to divs with a specific heigt and an image witch size depends on the screensize. The elements have som space between them which shold be removed if the user scrolls down, to save space. I realsied this with margins and different values for top.

My code (To be able to run it as snipped, I replaced the image with another div):

.sticky-1, .sticky-2{
    background-color: gray;
    width: 100%;
    height: 2em;
}

.sticky-1{
    margin-top: 1em;
    position: sticky;
    top: 0;
}

.sticky-2{
    margin-top: 1em;
    position: sticky;
    top: 2em;
}

.sticky-img, .Image{
    width: 50%;
    margin-top: 3em;
    position: sticky;
    top: 4em;
}

header{
    border: 1px solid;
}

.Image{
    background-color:green;
    aspect-ratio: 4/1;
}

<header>
            <div class="sticky-1">Element 1</div>
            <div class="sticky-2">Element 2</div>
            <!-- <img class="sticky-img" src="image.png"> -->
            <div class ="Image">This should be an image</div>
            <br><br>
        </header>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis convallis tellus id interdum velit laoreet id donec. Ut aliquam purus sit amet luctus venenatis. Sodales ut etiam sit amet nisl purus in. Ut tellus elementum sagittis vitae et leo duis ut diam. Orci a scelerisque purus semper eget duis at. Aliquet lectus proin nibh nisl condimentum id. Diam donec adipiscing tristique risus nec feugiat in. Purus faucibus ornare suspendisse sed nisi. Nunc pulvinar sapien et ligula. Velit ut tortor pretium viverra suspendisse potenti nullam. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Commodo ullamcorper a lacus vestibulum. Quisque non tellus orci ac auctor augue mauris augue. Massa sed elementum tempus egestas sed sed risus pretium quam.
<br><br>
Tempus egestas sed sed risus pretium quam vulputate. Fusce ut placerat orci nulla. Purus gravida quis blandit turpis cursus in hac habitasse. Faucibus scelerisque eleifend donec pretium. Leo duis ut diam quam. Id ornare arcu odio ut sem nulla pharetra diam. Ornare massa eget egestas purus viverra accumsan. Sed turpis tincidunt id aliquet. Urna duis convallis convallis tellus id. Est lorem ipsum dolor sit amet consectetur adipiscing elit. Lectus sit amet est placerat. Nibh mauris cursus mattis molestie. Tincidunt eget nullam non nisi est sit. Egestas pretium aenean pharetra magna ac placerat. Sem et tortor consequat id porta nibh venenatis cras sed. Et tortor at risus viverra. Amet cursus sit amet dictum sit amet justo donec. Purus sit amet luctus venenatis. Justo donec enim diam vulputate ut pharetra sit amet.
        </div>

This looks like the following: Image of the header

Now to my problem: I would like the parent element (header) to shrink/go as far up that it just fits the contents when the elements are "collapsed", and stay sticky like in the following picture:
image of the "collapsed" header, how it should be
In the current state the elements get moved out together with the header. Due to the fact, that the size of the image is based on the size of the viewport (and I plan to modify it dynamicly with js, but that is a different story) I can not give the header a (negative) value for top. Is there a way to solve this? I would prefere a solution that only uses css and no js, because some people disable js and I want a good userexperience for them as well.

I tried various things:

• Different values for overflow
• position:sticky; height: fit-content; for header
• many google searchs and questions to chat-GPT without result

Update:
I solved it by calculating the top value for the header using the calc() function. This works, but is a relatively long expression, so if someone does know a better way, it would be appreciated.