使父母填充切断子元素

Question

我有一个方形父容器，在所有4边都有2％的填充。我有一个较小的矩形溢出底部。我设置相对于它的父容器的形状的高度。我知道我可以使用overflow:hidden，但它只包含子元素，它不会使孩子尊重父母的填充。

.parent { 
 
    border-radius: 15px; 
 
    background: #cccac9; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 30%; 
 
    width: 60%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 2%; 
 
    overflow:hidden; 
 
} 
 
    
 
.child { 
 
    background: #1c1c1c; 
 
    position: relative; 
 
    height: 30%; 
 
    color: White; 
 
    text-align: center; 
 
    padding-top: 8px; 
 
}

<div class='parent'> 
 
    <div class='child'></div> 
 
</div>

的灰色背景是父，在底部的黑盒子是它的孩子。底部的黑色方块在灰色父容器的填充物上流血。

Answer 1

您可以将您的孩子包装到自己的容器中，然后在该容器上设置overflow: hidden。我也会将其高度设置为100％。

.parent { 
 
    border-radius: 15px; 
 
    background: #cccac9; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 30%; 
 
    width: 60%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 2%; 
 
} 
 
.child-container { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.child { 
 
    background: #1c1c1c; 
 
    color: White; 
 
    text-align: center; 
 
    padding-top: 8px; 
 
}

<div class='parent'> 
 
    <div class='child-container'> 
 
    <div class="child"> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
    </div> 
 
    </div> 
 
</div>