Set div height to the same as the parent div

This is my code:

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: var(--background-color-gray);
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.welcome div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-black);
}

<div class="content">
    <div class="welcome">
        <img src="resources/images/laptop1.webp" alt="Image not found">
        <div>
            <h1>SOME HEADLINE</h1>
            Some Text Some Text Some Text Some Text Some Text<br>Some Text Some Text Some Text
        </div>
    </div>
</div>

It looks like this
screenshot from my browser (firefox)

I need the div containing "SOME HEADLINE…" to be as high and wide as it’s parent has space available (the black background should be going up and down to the end of the image)

As you can see the width: 100%; in .welcome div works but the height doesn’t. I researched a bit and just can’t find out why the div does not scale to it’s parent. Does somebody know why and how I can fix this?
Thank you very much.

I tried a few different approaches but nothing worked. Most websites say if you have a div in a div and set the inner divs height to 100% it scales up to the borders of the outer div. Why does this not work in my setup?

>Solution :

just change your css little bit..

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
  }

  .welcome {
    background-color: gray;
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    overflow: hidden;
  }

  .welcome div {
    border: 1px solid red;
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    color: white;
  }