html - 让 flexbox 为侧边菜单填充浏览器的垂直空间

Question

我需要一个根据浏览器大小缩放的侧边菜单。但我还需要页眉和页脚，以及侧边菜单旁边的内容容器。所以假设侧边菜单是宽度的 1/4，内容容器是宽度的 3/4，但是侧边菜单和内容容器的高度始终是浏览器大小的 100% 或更多，具体取决于内容容器和侧边菜单中的内容。

我认为这很简单，只要有 flext-dir。上校和 children 的“flex:1”。 (还有一些代码，在下面的 fiddle 链接中)

但是只要我将侧边菜单包裹在一个新的 div 中，这样我就可以使内容容器位于侧边菜单旁边而不是下方。来自 flexbox 的垂直填充失败。

https://jsfiddle.net/frrvdq2n/2/

那么有没有人对如何解决这个问题有一些建议，或者可能有其他创建这个想法的技巧。提前致谢:)

IMG. of how om thinking the sizing should be on most browser sizes.

这里也是代码，以防万一:

HTML

  <!--<div class="container"> uncomment to see colapse-->
    <div class="wrapper">
      <div class="row3">Option One</div>
      <div class="row3">Option Two</div>
      <div class="row3">Option Three</div>
    </div>
  <!--</div>uncomment to see colapse-->

CSS

.wrapper, html, body {
  height:100%;
  margin:0;
}

.wrapper {
   display: flex;
   flex-direction: column;
}

.row3 {
   background-color: green;
   flex:2;
   display: flex;
}

Answer 1

对于您的初始代码示例，您只需为 .container 指定一个高度即可。

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3 {
    background-color: green;
    flex:2;
    display: flex;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">Option Two</div>
        <div class="row3">Option Three</div>
    </div>
</div>

---

从上面的示例中，您现在可以轻松地创建一个看起来像发布的图像的布局，方法是在中间的 row3 中添加 2 个子级，作为侧边栏和内容

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3 {
    background-color: green;
    flex:2;
    display: flex;
}

.col2:nth-child(1) {
    background-color: lightblue;
    flex-basis: 25%;
}

.col2:nth-child(2) {
    background-color: lightgreen;
    flex-basis: 75%;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">
            <div class="col2">Option Two A</div>
            <div class="col2">Option Two B</div>        
        </div>
        <div class="row3">Option Three</div>
    </div>
</div>

---

然后开始在 row3 元素上使用 flex-grow 和 flex-basis ，您可以根据内容调整它们的大小，设置高度并填充剩余空间。

.container, .wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.row3:nth-child(1) {
    background-color: green;
    flex-basis: 50px;              /*  a set height  */
}

.row3:nth-child(2) {
    flex:1;                         /*  fill the remain  */
    display: flex;
    margin: 10px 0;
}

.row3:nth-child(3) {
    background-color: green;        /*  sized by content  */
}

.col2:nth-child(1) {
    background-color: lightblue;
    flex-basis: 25%;
}

.col2:nth-child(2) {
    background-color: lightgreen;
    flex-basis: 75%;
    margin-left: 10px;
}

<div class="container">
    <div class="wrapper">
        <div class="row3">Option One</div>
        <div class="row3">
            <div class="col2">Option Two A</div>
            <div class="col2">Option Two B</div>        
        </div>
        <div class="row3">Option Three</div>
    </div>
</div>