div的高度属性在我的flexbox中表现不正常

Question

我正在尝试在我的主页上创建一部数字手机。我的想法是，最终屏幕上会显示我的信息以及向下滚动的提示。

不幸的是，作为手机屏幕轮廓的div表现不像我对高度属性的预期。以下是两个用于说明问题的屏幕截图：

HTML：

<div class="no-container" id="landing-page">
    <div class="flexbox-center-row">
        <div class="flexbox-center-col" id="digital-phone">
            <div id="digital-phone-decorations">
                <div id=speaker>

                </div>
                <div id="camera">

                </div>
            </div>
            <div class="screen-glow" id="digital-phone-screen">
                <div class="center-text flexbox-center-col" hidden>
                    <img class="img-fluid" src="includes/img/cole-logo-3.svg"></img>
                    <p>Tap the Button Below</p>
                </div>
            </div>
            <div class="begin-btn">
                <a><i class="fa fa-chevron-down text-shadow" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</div>

SCSS：

h1 {
    font-size: calc(200% + 0.25vw);
    padding-top: 4vh;
}

.begin-btn {
    color: white;
    display: flex;
        justify-content: center;
    font-size: 60px;
    opacity: 1;
    transition: all 0.2s;

    a:active {
        transform: scale(1.3);
    }

    .fadeIn {
        opacity: 0;
    }
}

#digital-phone {
    border: 2px solid white;
    border-radius: 20px;
    height: 90vh;
    padding: 0 25px;
}

#digital-phone-screen {
    border: 2px solid white;
    height: 70vh;
    padding: 0;
    width: 40vh;

    div {
        background: white;
        height: 100%;
        padding: 15vh 10px 0 10px;
        justify-content: space-between;
        width: 100%;
    }

    p {
        font-size: calc(80% + 0.25vw);
    }
}

#landing-page {
    background: $blue;
    min-height: 100vh;
    padding-top: 5vh;
}

#speaker {
    border-radius: 40px;
    width: 60px;
}

#camera {
    border-radius: 50px;
    width: 15px;
}

#digital-phone-decorations {
    display: flex;
        justify-content: center;
        align-content: center;
    padding: 15px 0;

    div {
        border: 2px solid white;
        height: 15px;
        margin: 0 5px;
    }
}

.screen-glow {
    box-shadow: 0 0px 5px rgba(256, 256, 256, 0.9);;
}

@media (min-width: 768px) {
    .begin-btn {
        font-size: 90px;
        margin-top: 40vh;
    }
}

.flexbox-center-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flexbox-center-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

这里发生了什么，为什么这个div没有占据视口高度70％的高度？它似乎只是进一步推动雪佛龙图标。