Change height of full screen slider according to content

Hi, I created a full screen slider as David Conner did in his workshop.
But I have quite a lot of text in one of slides. And I found out, that the heigh of this slide doesn't change according to amount of text. The content that is higher than height of the page is just not visible. Is possible to fix this without using javascript?

Here is my code. There is also more css code to make it work like "slider", but I think that it's not important to solve this problem.
I can change height of slide changing .wrap height, but it changes height of all slides and it's not changing according to amount of text.

P.S. sorry for my English

<div class="wrap">

    <header>
        <label for="slide-1-trigger">Slide One</label>
        <label for="slide-2-trigger">Slide Two</label>
    </header>

    <input id="slide-1-trigger" type="radio" name="slides" checked>
        <section class="slide slide-one">
            <h1>Headline One</h1>
            <p>A lot of text here...</p>
        </section>

    <input id="slide-2-trigger" type="radio" name="slides">
        <section class="slide slide-one">
            <h1>Headline Two</h1>
        </section>
</div>

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%; 
    z-index: 10;
    padding: 8em 1em 0;
    background-color: #120103;
    background-position: 50% 50%;
    background-size: cover;
    transition: left 0s 0.75s; 
}