Flexbox inheritence issue

I am building a simple website. I have flex boxes full of "modules" which contain text content. When one of these modules is hovered over (using javascript code that is not included in this post because it works fine) I would like a "shade" to appear which darkens the entire module and displays a button. I am having a lot of trouble getting the shades to be the correct size: 100% of the width and height of each module. For some reason, height and width are not inherited from module to shade.

HTML:

<div class="support">
    <div class="module">
        <div class="shade">
            <a href="#"><button type="button" class="source_btn">View Source</button></a>
        </div>
        <div class="content">
            <h1>Homocide rates have skyrocketed in the United States.</h1>
            <p>Jeffery Miron, an economist estimates that the homicide rate in America is as much as seventy-five percent higher $
        </div>
    </div>
    <div class="module">
        <div class="shade">
            <a href=""><button type="button" class="source_btn">View Source</button></a>
        </div>
        <div class="content">
            <h1>Drug markets are forced to solve their disputes through violence.</h1>
            <p>Because the War on Drugs has forced drug markets into the shadows, there is now way they can settle disputes throu$
        </div>
     </div>
    <div class="module">
        <div class="shade">
            <a href=""><button type="button" class="source_btn">View Source</button></a>
        </div>
        <div class="content">
            <h1>The violence is not only occurring in the United States.</h1>
            <p>For some perspective, there have been almost one hundred thousand deaths in Mexico in the past decade caused not b$
        </div>
    </div>
</div>

CSS:

 section .support {
     display: flex;
     flex-direction: row;
     background: var(--bg);
     height: 60vh;
 }

 .module {
     flex: 1;
     text-align: center;
     height: inherit;
 }

 .module .content h1 {
      margin-top: 5rem;
     margin-bottom: 5rem;
     font-size: 2.5rem;
 }
 
 .module .content p {
     font-size: 1.5rem;
     padding: 0 3rem 0 3rem;
 }
 
 .module .shade {
     position: absolute;
     background: rgba(0,0,0,.6);
 }
 
 .shade .source_btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 20%;
     height: 20%;
     font-size: 2vw;
     background: var(--background);
     color: var(--accent);
     border: 2px solid var(--accent);
     border-radius: .5rem;
 }

Note that if I change the .shade styling to:

.module .shade {
     position: absolute;
     background: rgba(0,0,0,.6);
     width: 33.33333%;
     height: 60vh;
 }

I get the exact desired effect IF there are 3 modules. I believe this means that the width and height are inherited from elsewhere, and I do not know why. I need to be able to say width: 100% and height: 100% in the .shade styling to make the shade take up the entire module because there will be a different number of modules per support class.

I am very confused as to why the width and height are not being inherited as I would expect. Since .shade is a child of .module, why aren't the width and height inherited from the .module div?

If I can provide any additional information, please let me know. I will be active.