CODEWITHSUNDEEP
csshtml
ecain
ecain

Reputation: 1302

Make parent padding cut off child element

I have a square parent container that has a 2% padding on all 4 sides. I have a smaller rectangle that spills over the bottom. I am setting the height of the shape relative to it's parent container. I know I can use overflow:hidden but that simply contains the child element, it doesn't make the child respect the parent's padding. 

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

Item I'm working with.

The grey background is the parent, the black box in the bottom is it's child. The bottom black box is bleeding over the grey parent container's padding.

Upvotes: 1

Views: 3579

Answers (1)

Bobby Speirs
Bobby Speirs

Reputation: 667

You can wrap your child up into a container of its own, then set the overflow: hidden on that container. I would also set its height to 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>

Upvotes: 1

Related Questions