CSS: Получить дочерний элемент для уважения padding-bottom родителя

Question

У меня есть элемент с высотой, заполнением и переполнением: скрытый. Его дочерний элемент соответствует верхнему и боковому прокладкам, но он перекрывается в нижней части родителя. Как я могу это предотвратить?

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: в ответ на предложение, что это то же самое, как overflow:hidden ignoring bottom padding, это не так. Окончательный ответ на мой вопрос намного шире, чем любой из ответов на этот другой вопрос, потому что моя настройка отличается: у меня есть только один дочерний элемент.

Answer 1

Вы можете добавить height и overflow в #child.

Jsfiddle

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

Answer 2

Добавить один родительский DIV как этот

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

Добавить CSS

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

} 

Answer 3

Вы должны использовать, как это -

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