html - Flexbox:将侧边栏高度拉伸(stretch)到父级

Question

如何正确地把 child 拉到 parent 的高度？我已经尝试了很多我发现的变体(很多非常复杂)，但它对我来说从来没有用过。我更愿意用 flex-box 来做这件事，因为这似乎是最新的方法。这是我的尝试:

<div class="main h-100">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a href class="navbar-brand">Menu</a>
  </nav>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-xs-2 bg-light h-100 pr-3 menuContainer">
        <button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
        <nav class="navbar navbar-light list">
          <ul class="navbar-nav flex-column">
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>

          </ul>
        </nav>
      </div>
      <div class="col-xs-10 p-0">
        Content
      </div>
    </div>
  </div>

body {
  height: 100vh;
}

.bg-light {
  background-color: green !important;
}

.list {
  overflow-y: auto;
  height: 100%;
  align-items:start
}

.menuContainer {
  display: flex;
  flex-flow: row wrap;
}

.list {
  flex: 1;
  background-color: red;
}

http://jsfiddle.net/x1hphsvb/2065/

最后，我想删除滚动条，以便菜单(红色框)从现在开始的位置开始，并在屏幕结束的位置结束。

目标还在于能够放置任何东西而不是 Content 并且 height: 100% 所以它也是一样的。

内容和菜单都可以更大——在这种情况下，我希望他们自己添加一个滚动条——我为此使用了overflow-y: auto。

Answer 1

http://jsfiddle.net/x1hphsvb/2083/

html, body {
  height: 100%;
}

.bg-light {
  background-color: green !important;
}

.list {
  overflow-y: auto;
  align-items:start
}

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

.list {
  flex: 1;
  background-color: red;
}

.site-content {
  height: calc(100% - 56px);
}

主要区别:

• flex-direction: column 在侧边栏元素上。
• 移除 .site-content 上的 100% 高度，改为 calc(100% - 56px)，这是标题高度。