html - Flexbox 没有拉伸(stretch)到页面的全高

Question

为什么这个 Flexbox 代码没有拉伸(stretch)到页面的全高？

我已经尝试了 Flex Layout 附带的大部分属性我无法将内容展开到页面的整个高度，因此它会随着视口(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

给你的高度“100vh”。对于根元素百分比将不起作用。它将作用于子元素。