How to set a block's height to 100% while in flex layout?

Question

See my plunker: http://plnkr.co/edit/YQZZDz7VBN4MFKDrj77d?p=preview

@import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css';
body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.view {
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.category-nav {
  padding: 0px;
  background-color: #F2F2F2;
  min-height: 100%;
}
.main {
  background-color: #D8D8D8;
}
footer {
  text-align: center;
}

<div style="width: 100%; height: 50px;"></div>
<div class="view">
  <div class="container-fluid" role="main">
    <div class="row">
      <div class="col-sm-3 col-lg-2 category-nav">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="搜索...">
              <div class="input-group-addon"><i class="fa fa-search"></i></div>
            </div>
          </li>
          <li role="presentation" >
            <a href="#">
              <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test111
            </a>
          </li>
          <li role="presentation" >
            <a href="#" class="account">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test222
            </a>
          </li>
          <li role="presentation" >
            <a href="#" class="account">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test333
            </a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 col-lg-10 main">
        hello world
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="copyright">
    <div class="container">
      <p>
        <span>© 2015 <a href="http://www.test.com/" target="_blank">Hello world</a></span>
        <a class="icp" href="http://www.test.test.cn/" target="_blank">testtest-2</a>
        <span>hotline：4000 000 000</span>
        <span>system 1.0.0</span>
        <a href="http://www.test.com/#/protocol" target="_blank" class="agreement">protocol</a>
      </p>
    </div>
  </div>
</footer>

I'd like to have the .category-nav block with the background-color extend to the bottom of the page.

But it doesn't work while set min-height: 100%; on it.

Answer 1

Making body a flex container isn't enough. You need more flexboxes:

body, .view, .container-fluid, .row {
  display: flex;
  flex-direction: column;
}
.view, .container-fluid, .row, .category-nav {
  flex-grow: 1;
}

@import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css';
body, .view, .container-fluid, .row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.view, .container-fluid, .row, .category-nav {
  -webkit-flex-grow: 1;
      -ms-flex-grow: 1;
          flex-grow: 1;
}
.container-fluid {
  margin: 0; /* Remove bootstrap margins */
}
body {
  min-height: 100vh;
}
.category-nav {
  padding: 0px;
  background-color: #F2F2F2;
}
.main {
  background-color: #D8D8D8;
}
footer {
  text-align: center;
}

<div style="width: 100%; height: 50px;"></div>
<div class="view">
  <div class="container-fluid" role="main">
    <div class="row">
      <div class="col-sm-3 col-lg-2 category-nav">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="搜索...">
              <div class="input-group-addon"><i class="fa fa-search"></i></div>
            </div>
          </li>
          <li role="presentation" >
            <a href="#">
              <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test111
            </a>
          </li>
          <li role="presentation" >
            <a href="#" class="account">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test222
            </a>
          </li>
          <li role="presentation" >
            <a href="#" class="account">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              &nbsp;&nbsp;
              test333
            </a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 col-lg-10 main">
        hello world
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="copyright">
    <div class="container">
      <p>
        <span>© 2015 <a href="http://www.test.com/" target="_blank">Hello world</a></span>
        <a class="icp" href="http://www.test.test.cn/" target="_blank">testtest-2</a>
        <span>hotline：4000 000 000</span>
        <span>system 1.0.0</span>
        <a href="http://www.test.com/#/protocol" target="_blank" class="agreement">protocol</a>
      </p>
    </div>
  </div>
</footer>

Answer 2

Try like this: Demo

body{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;  
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
    /*min-height: 100vh;  removed */
}

.category-nav {
  padding: 0px;
  background-color: #F2F2F2;
  min-height: 100vh; /* Newly added */
}