Как автоматически настроить высоту контейнера в соответствии с содержимым

У меня есть веб-сайт, на котором есть слайдер для перехода между абзацами.

Как настроить высоту слайдера, чтобы он динамически изменялся в зависимости от того, сколько содержимого находится в соответствующем абзаце.

На данный момент, независимо от того, сколько контента находится в абзаце, мой ползунок все равно сдвигает все вниз, независимо от высоты.

Заранее благодарю за помощь.

Codepen

<div class = "main_body">

<div class = "grid-x align-centered">
        <div class = "cell large-12 main_content">

            <div id = "slider-wrapper">
                <!-- slider controls -->
                <div class = "slider-controlls">
                    <button class = "next">></button>
                    <button class = "prev"><</button>
                        </div>
                    <!-- slider items -->
                    <div class = "slider-items">
                        <div class = "slider-item">
                            <div class = "content">
                                <div class = "title">
                                    <h3>Our Mission</h3>
                                </div>

                                <p>
Our Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamlearn best in
while pLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam and
responsive. Children aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamolvers.
Children conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamay. <br /> We will work with the
child's natural inclination to explore and solve problems. We believe this
motivates learning for success in your child's school readiness and future.
</p>

                            </div>
                        </div>
                        <div class = "slider-item ">
                            <div class = "content">
                                <div class = "title">
                                    <h3>Our Curriculum</h3>
                                </div>

                                <p>
Our center follows the Creative Curriculum. This curriculum is designed to
challenge our children, build their self confidence and, most importantly,
develop aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamum encourages
learning through arts, language, music, and socialization. <br /><br />We believe in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnean nulla quamild
development from early infancy through preschool years, focuses on
teacher-directed and child-initiated learning. <br /><br />The curriculum is goal-directed,
based on ongoing assessments for each child’s strengths and interests. With this
iLorem ipsLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quammotional
development is supporteLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamrmed of the
goals in the classroom and of how learning can be reinforced at home.
</p>

</div></div>
                            <div class = "slider-item ">
                                <div class = "content">
                                    <div class = "title">
                                        <h3>Our Philosophy</h3>
                                    </div>

                                    <p>We believe that each child is unique in
                                    his/her own development and has the right to
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                    a wholesome environment that will provide
                                    early training in the life of a child and
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnd
                                    the Staff dedicate their time and efforts
                                    toward the following goals:   </p>
                                    <ul>
                                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
    nuLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quams. </li> <li>
    ELorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamopmentally
    aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
    experimentation.

                                        </li> <li> Fostering positive attitudes
                                        towards life and school which lay aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamfoundation for experience in future
                                        years.

                                        </li> <li> Encouraging the development
                                        of a positive self-image.

                                        </li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                        working parents. </li> <li> Encouraging
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                        school, home, and in the community.

                                        </li> <li> Promoting an educational
                                        environment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam. </li>
                                        <li> The parent, and staff will bond
                                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
                                        education of their child. </li>
                                    </ul>


                                </div>
                            </div>
                            <div class = "slider-bullets">
                                <span class = "bullet"></span>
                                <span class = "bullet"></span>
                                <span class = "bullet"></span>
                            </div>  <!-- slider bullets -->


                    </div>


                </div>

        </div>
        <div class = 'cell large-12'>
            <img height = "300" width = "500" src = "http://s470961525.onlinehome.us/wp-content/uploads/2013/06/walking.png"/>
        </div>

  </div></div>

CSS

.main_body{
    background-image: url('https://www.thevinelearningcenter1.com/wp-content/uploads/2015/09/background.jpg');
    //background-image: url('http://www.powerpointhintergrund.com/download/children-powerpoint-template-to-educate-your-children-mutimedia--5616');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: top;
    width:100%;
    max-width:100%;
}
#slider-wrapper {
    width: 100%;
  height:100vh;
    position: relative;
}
.slider-controlls {
    .next, .prev{
        display: block;
        position: absolute;
        border: none;
        background-color: hsla(200, 100%, 80%, 0.2);
        border-radius:10px;
        cursor:pointer;
        color: black;
        top:50%;
        padding:15px;
        transform: translateY(-50%);
        font-size: 18px;
        z-index: 99999;
    }
    .next{
        right:70px;
    }
    .prev{
        left:70px;
    }
}

.slider-items {

    height: 100vh;
    position: relative;
    overflow:hidden;
    .slider-item{
        width:100%;
        position: absolute;
        opacity: 1;
        &.active{
            opacity:1;
            .content{
                .title h3{
                    opacity:1;
                    z-index: 9999;
                    font-weight: normal;
                    font-family: 'Gaegu', cursive;
                    font-weight:700;
                    background-color: hsla(200, 100%, 80%, 0.5);;
                    padding: 25px 0;
                    letter-spacing: 15px;
                    color:green;
                }
                p{
                    letter-spacing: 3px;
                    line-height:2em;
                    text-align: left;
                    font-family: 'Gaegu', cursive;
                    opacity: 1;
                    left: 20%;
                    z-index: 9999;
                    font-weight:500;
                    padding-left:100px;
                    padding-right:100px;
                    width:80%;
                }
                ul{
                    font-family: 'Gaegu', cursive;
                    margin-top:-5%;
                    opacity:1;
                    letter-spacing: 2px;
                    text-align: left;
                    line-height:2em;
                    font-size: 18px;
                    z-index: 9999;
                    padding-left:100px;
                    padding-right:100px;
                    width:80%;
                }
                img{
                    opacity:1;
                }
            }
        }
        .content{
            width:100%;
            position: relative;
            .title h3{
            text-align: center;
                opacity:0;
                transition: all 0.5s;
            }
            p{
                padding: 5% 0 50px 50px;
                margin:0 auto;
                opacity:0;
                transition: all 0.6s;
                transition-delay: 0.1s;
                background-color: hsla(200, 100%, 90%, 0.8);
                width:85%;
                font-family: 'Gaegu', cursive;
            }
            ul{
                font-family: 'Gaegu', cursive;
                padding: 5% 0 50px 50px;;
                margin:0 auto;
                opacity:0;
                transition:all .10s;
                background-color: hsla(200, 100%, 90%, 0.8);
                width:85%;
                transition-delay:.6s;
                margin-top:-3%;
            }
        }
    }
}
.slider-bullets {
    width:100px;
    bottom:20px;
  position:absolute;
    margin-top:10px;
    text-align: center;
    z-index: 99999;
    width:100%;
    .bullet{
        width: 20px;
        height: 20px;
        background: rgba(#e4e4e4, 1);
        border: 2px solid transparent;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s;
        &.active{
            border: 2px solid #333;
        }
    }
}

@media screen and (max-width:1300px){
    .slider-items{
        .slider-item{
            width:100%;
            position: absolute;
            opacity: 1;
            &.active{
                opacity:1;
                .content{
                    .title h3{
                        opacity:1;
                        z-index: 9999;
                        font-weight: normal;
                        font-family: 'Gaegu', cursive;
                        font-weight:700;
                        background-color: hsla(200, 100%, 80%, 0.5);;
                        padding: 25px 0;
                        letter-spacing: 15px;
                        color:green;
                    }
                    p{
                        font-size:18px;
                        letter-spacing: 2px;
                        line-height:1.7em;
                        text-align: left;
                        font-family: 'Gaegu', cursive;
                        opacity: 1;
                        left: 20%;
                        z-index: 9999;
                        padding-left:50px;
                        padding-right:50px;
                        width:80%;
                    }
                    ul{
                        font-size:14px;
                        line-height:2em;
                        padding-left:50px;
                        padding-right:50px;
                    }
                }

            }
    }
    }
    }