使父填充切断子元素

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>