Flexbox无法拉伸到页面的全部高度

Question

Why this Flexbox code is not stretching to full height of the page?

I have tried most of the properties the Flex Layout comes with I'm not able to spread the content to the full height of the page, so that it dynamically adjusts with the height of the viewport.

<div class="div-1">
    <div class="div-2">
        <div class="div-3">
        <div class="div-4">
        <div class="div-5">
            <div class="col-sm-6 l-col">
                <div class="l-col-inner">
                    <div class="m-tags">
                        <div class="pts">Lorem ipsum dolor sit amet</div>
                        <div class="pts">Lorem ipsum dolor sit amet</div>
                        <div class="pts">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 r-col">
                <div class="r-col-inner">
                    <div class="log-bar">
                        <form class="form-inline justify-content-md-center">
                            <div class="form-group col-sm-4">
                                <input type="email" class="form-control" id="name-inp" placeholder="name@example.com">
                            </div>
                            <div class="form-group col-sm-4">
                                <input type="password" class="form-control" id="f-pass-inp" placeholder="Password">
                            </div>
                            <div class="form-group col-auto">
                                <button type="submit" class="btn btn-outline-primary">Login</button>
                            </div>
                        </form>
                    </div>
                    <div class="log-quot col-sm-10">
                        Lorem ipsum dolor sit amet
                    </div>
                    <div class="log-btns">
                        <button type="submit" class="btn btn-primary col-sm-5">Sign Up</button>
                        <button type="submit" class="btn btn-danger col-sm-5">Login</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </div>
</div>

CSS:

body {
        height: 100%;
    width: 100%;
    overflow-y: scroll;
    overscroll-behavior-y: none;
    background-color: rgb(255, 255, 255);
}
.l-col {
    overflow-y: hidden;overflow-x: hidden;padding:0.984375rem;flex: 1 1 0%;flex-shrink: 1 !important;background-color: rgb(29, 161, 242);-webkit-box-pack: center;
    justify-content: center;flex-grow: 1 !important;z-index: 0;position: relative;min-width: 0px;min-height: 0px;margin:0;    -webkit-box-direction: normal;
    -webkit-box-orient: vertical; flex-direction: column; display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.r-col {
    padding-left: 0.984375rem;padding-bottom: 0.984375rem;padding-right: 0.984375rem;padding-top: 0.984375rem;flex: 1 1 0%;flex-shrink: 1 !important;-webkit-box-pack: center;
    justify-content: center;flex-grow: 1 !important; z-index: 0; position: relative; min-width: 0px; min-height: 0px;margin:0; -webkit-box-direction: normal; 
    -webkit-box-orient: vertical; flex-direction: column;display: flex;box-sizing: border-box;border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.l-col-inner {
    max-width: 380px;align-self: center;z-index: 0;position: relative;padding: 0px;min-width: 0px;min-height: 0px;margin:0;-webkit-box-direction: normal;
    -webkit-box-orient: vertical; flex-direction: column;flex-basis: auto !important; flex-shrink: 0 !important;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.r-col-inner {
    align-self: center;z-index: 0;position: relative;padding: 0px;min-width: 0px;min-height: 0px;margin:0;-webkit-box-direction: normal;
    -webkit-box-orient: vertical; flex-direction: column;flex-basis: auto !important; flex-shrink: 0 !important;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.l-col-inner .m-tags {

}
.r-col-inner .log-bar {
     -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: center; justify-content: center; -webkit-box-direction: normal; -webkit-box-orient: horizontal;
     flex-direction: row; z-index: 0; position: relative; padding: 0px; min-width: 0px; min-height: 0px; margin: 0; flex-basis: auto !important; flex-shrink: 0 !important;
         display: flex;    box-sizing: border-box;border:0px solid;
}

.div-1 {
    width: 100%;height: 100%;z-index: 0;position: relative;padding: 0px;margin:0;min-width: 0px;min-height: 0px;-webkit-box-direction: normal;-webkit-box-orient: vertical;
    flex-direction: column;flex-basis: auto !important;flex-shrink: 0 !important;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;
    align-items: stretch;
}
.div-2 {
    flex-shrink: 1 !important;flex-grow: 1 !important;z-index: 0;position: relative;padding:0;margin:0;min-width: 0px;-webkit-box-direction: normal;-webkit-box-orient: vertical;
    flex-direction: column;flex-basis: auto !important;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.div-3 {
    flex-shrink: 1 !important;flex-grow: 1 !important;z-index: 0;position: relative;padding:0;margin:0;min-width: 0px;min-height: 0px; -webkit-box-direction: normal; -webkit-box-orient: vertical; flex-direction: column;flex-basis: auto !important;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch;align-items: stretch;
}
.div-4 {
    flex: 1 1 0%;flex-shrink: 1 !important;flex-grow: 1 !important;z-index: 0;position: relative;padding:0;margin:0;min-width: 0px;min-height: 0px;-webkit-box-direction: normal;
    -webkit-box-orient: vertical; flex-direction: column; display: flex; box-sizing: border-box; border-box;border:0px solid; -webkit-box-align: stretch; align-items: stretch;
}
.div-5 {
    flex: 1 1 0%;flex-shrink: 1 !important; flex-grow: 1 !important;z-index: 0; position: relative;padding:0;min-width: 0px;min-height: 0px;margin:0;display: flex;box-sizing: border-box;border:0px solid;-webkit-box-align: stretch; align-items: stretch;
}

https://jsfiddle.net/aq9Laaew/68086/

Answer 1

give your body height '100vh'. For root element percentage won't work. it will work on the child element.