Почему этот код Flexbox не растягивается на полную высоту страницы?
Я испробовал большинство свойств, которые предоставляет Flex Layout. Я не могу распространить содержимое на полную высоту страницы, чтобы оно динамически регулировалось с высотой области просмотра.
<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/