Help with making card-text scrollable

<style>
        .scroll-box {
            overflow-y: scroll;
            height: 100px;
            padding: 1rem
        }
</style>

        <div class="col-md-5">

            <!--Rotating card-->
            <div class="card-wrapper">
                <div id="card-1" class="card-rotating effect__click">

                    <!--Front Side-->
                    <div class="face front">

                        <!-- Image-->
                        <div class="card-up">
                            <img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
                        </div>
                        <!--Avatar-->
                        <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" class="img-circle img-responsive">
                        </div>
                        <!--Content-->
                        <div class="scroll-box">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
                        </div>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>

                    </div>
                    <!--/.Front Side-->

                    <!--Back Side-->
                    <div class="face back">

                        <!--Content-->
                        <h4>About me</h4>
                        <hr>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
                        <hr>
                        <!--Social Icons-->
                        <ul class="inline-ul">
                            <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                            <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                            <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                            <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>

                    </div>
                    <!--/.Back Side-->

                </div>
            </div>
            <!--/.Rotating card-->

        </div>