CSS: Get child element to respect parent's padding-bottom

Question

I have an element with height, padding, and overflow:hidden. Its child element respects the top and side paddings, but it overlaps into the parent's padding-bottom. How do I prevent this?

http://jsfiddle.net/va78jsm5/

#parent{
    background:yellow;
    overflow:hidden;
    width:100px;
    height:100px;
    padding:25px;
}

<div id = "parent">
  <div id = "child">  
      text text text text text text ...
  </div>
</div>

Edit: in response to the suggestion that this is the same as overflow:hidden ignoring bottom padding , it's not. The final answer to my question is so much more elegant than any of the answers to that other question because my setup is different: I only have one child element.

Answer 1

Add one parent div like this

<div class="test">
<div id = "parent">
  <div id = "child">  
      text  text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>
</div>

Add this css

.test{
    width:100px;
    padding:25px;
     background:yellow;
}
#parent{
   height:100px;
    overflow:auto;

}

Answer 2

You should use like this -

#child {
   height: 100%;
   overflow: hidden;
}

 #parent{ background:yellow; overflow:hidden; width:100px; height:100px; padding:25px; } #child { height: 100%; overflow: hidden; } 

 <div id = "parent"> <div id = "child"> text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> <br/> <div> There should also be padding on the bottom of the yellow square. </div> 

Answer 3

You can add height and overflow to the #child .

Jsfiddle

#child{
    height: 100%;
    overflow: hidden;
}