close
close

html – Height 100vh divs going off screen

Posted on by angelo
html – Height 100vh divs going off screen

I have multiple wrapper divs inside the container div. If there is only one wrapper div, it should display in the middle of the screen. I achieved this with height: 100vh in the container div. But when I add wrapper divs at the bottom of the container div, the top wrapper divs go out of the top screen. If I remove height: 100vh, this problem is avoided, but if there is only one wrapper div, it does not display in the center of the screen. It stuck at the top. I just want that if there is one wrapper div, it should display in the middle of the screen and when adding multiple divs, the top div stays on top and scrolls to display the bottom divs. I have added screenshots of the expected behavior for a clear idea. 1 wrapper div multiple wrapper divs

body {
    background-color: #216092;
    line-height: 1.4;
}

.message-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.message-wrapper {
    max-width: 640px;
    width: calc(100% - 40px);
    padding: 44px;
    margin-bottom: 28px;
    min-width: 320px;
    min-height: 338px;
    overflow: hidden;
}

.panel {
    margin-bottom: 28px !important;
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

<body>
    <div class="message-container">
        <div class="message-wrapper panel panel-default">Div1</div>
        <div class="message-wrapper panel panel-default">Div2</div>
        <div class="message-wrapper panel panel-default">Div3</div>
    </div>
</body>