使父填充切断子元素

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％。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;