我正在建立一個簡單的網站。我有充滿“模塊”的彈性盒子，其中包含文本內容。當這些模塊之一懸停在上面時（使用本文未包含的 JavaScript 代碼，因為它工作正常），我希望出現一個“陰影”，它使整個模塊變暗并顯示一個按鈕。我在將陰影設置為正確的尺寸時遇到了很多麻煩：每個模塊寬度和高度的 100%。由于某種原因，高度和寬度不會從模塊繼承到陰影。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; }如果有 3 個模塊，我就能得到確切的預期效果。我相信這意味著寬度和高度是從其他地方繼承的，我不知道為什么。我需要能夠在 .shade 樣式中說width: 100%and以使陰影占據整個模塊，因為每個支持類會有不同數量的模塊。height: 100%我很困惑為什么寬度和高度沒有像我期望的那樣被繼承。既然 .shade 是 .module 的子級，為什么寬度和高度不繼承自 .module div 呢？