Max-height does not hide padding

by Matthew Day

HTML

<div class="parent">I am a parent
    <div class="child">
        Here is some text
    </div>
</div>

CSS

.parent {
    width: 200px;
    border: 1px solid gray;

}

.child {
    padding-top: 46px;
    max-height: 10px;
    overflow: hidden;
    border: 1px solid red;
}

.child:hover {
    max-height: 50px;
}