如何使用 flexbox 创建侧边栏和内容区域？

Question

我想使用 flexbox 创建侧边栏和主要内容区域。侧边栏的高度应该至少是窗口的高度。但是，如果内容高度大于窗口，则侧边栏的高度应该增长以匹配内容的高度。这个想法是，当我们滚动查看所有内容时，侧边栏应该看起来好像它延伸到与内容相同的高度。

这是我的尝试：http : //codepen.io/nareshbhatia/pen/QbZqyd。使窗口宽度非常小。不幸的是，侧边栏仅延伸到窗口高度。此外，当我向下滚动时，内容区域会失去其背景颜色。

这是完整的代码：

HTML

<div class="flex-container">
    <div class="sidenav">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div class="content">
        lorem ipsum lorem ...
    </div>
</div>

CSS

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

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    height: 100%;
}

.sidenav {
    background-color: lightgray;
    -webkit-flex: 1;
    flex: 1;
}

.content {
    background-color: lightblue;
    padding: 10px;
    -webkit-flex: 5;
    flex: 5;
}

Answer 1

你只需要使用min-height而不是height

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

body {
  height: 100%;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    min-height: 100%;
}

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

body {
  height: 100%;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    min-height: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
}
body {
  height: 100%;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: red;
  min-height: 100%;
}
.sidenav {
  background-color: lightgray;
  -webkit-flex: 1;
  flex: 1;
}
.content {
  background-color: lightblue;
  padding: 10px;
  -webkit-flex: 5;
  flex: 5;
  height: 2000px;
}