"Position absolute bottom:-100%"de verilen element neden alta gitmiyor?

<div class="box">
 <img
 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsaJMxdTXg-GysxYUXCrN8tRAx_voq-lDE56gtd-vZsDxjmjQq"
 alt=""
 class="img"
 />
 <div class="content">
 <div class="contentNameRate">
 <h2 class="name">Hard Kill</h2>
 <p class="rate">4.9</p>
 </div>
 <div class="readmore">
 <h4>Hard Kill</h4>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Perspiciatis cumque ullam aut molestiae? Reprehenderit provident
 officiis nulla. Id dolorem necessitatibus veniam sequi sunt
 nesciunt maiores ad vitae, assumenda et cupiditate, fuga quo
 soluta quod totam eos placeat fugit voluptas facilis delectus
 aliquam sed quos? Laboriosam tempore veniam sequi necessitatibus
 reiciendis ratione ex vitae obcaecati quasi fuga quod sapiente
 similique fugit nobis aperiam ab, nihil temporibus accusantium
 magnam cum blanditiis! Maxime, debitis aperiam, voluptatibus
 sequi dicta ratione, velit dignissimos minima totam quis rem
 perspiciatis.
 </p>
 </div>
 </div>
 </div>

.content {
 position: relative;
 padding: 0 10px 65px;
}

.readmore {
 position: absolute;
 bottom: 0;
 right: 0;
 left: 0;
 height: auto;
 transition: all 0.3s linear;
 background-color: #fff;
 padding: 25px 25px 5px;
 font-size: 1.3rem;
 line-height: 1.26;
 color: black;
 font-family: sans-serif;
}

.content.active .readmore {
 bottom: -100%;
}