Q:

How to stretch div to full height with flex

How do I stretch the divs with a yellow background to full height?  It should cover up the green but it is not working.  I tried adding height: 100% on it but then it adds up the height from the search bar? 
https://jsfiddle.net/nuy20j1h/

.block {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  height: 600px;
  width: 25%; 
  background: red;
}

.home {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 75%;
  background: green;
}

.search-bar {
  width: 100%;
  padding: 25px;
  background: blue;
}

.content-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-stretch;
}

.content,
.single {
  width: 50%;
  background: yellow;
}
<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

A:

As mentioned in other answers, there is one main issue here:

flex-direction:  column;, which I added to home, to enable the usage of flex properties instead of height, to make the .content-wrap fill the available space left in home

That will make the .search-bar and .content-wrap stack vertical, and enable the use of flex: 1 on .content-wrap, which will make it fill the remaining space/height. 

So even if you got answers already, and since there are some properties with wrong value, or not needed, I decided to post an answer to clarify the changes made. 
See my notes made in the CSS for further clarifications and what I changed. 
Stack snippet

.block {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  height: 600px;
  width: 25%; 
  background: red;
}

.home {
  display: flex;
  flex-direction:  column;      /*  added  */
  /*flex-wrap: wrap;                removed, not needed  */
  /*align-items: flex-start;        removed, items should fill parent's,
                                    in this changed case, width  */
  width: 75%;
  background: green;
}

.search-bar {
  /*width: 100%;                    not needed, default for column
                                    item is to fill parent width as
                                    its "align-items" is "stretch"  */
  padding: 25px;
  background: blue;
}

.content-wrap {
  flex: 1;                      /*  added, take the remaining space left
                                    left of its parent (height in this case)  */
  display: flex;
  flex-wrap: wrap;
  /*width: 100%;                    not needed, default for column
                                    item is to fill parent width as
                                    its "align-items" is "stretch"  */

  /*align-items: flex-stretch;      wrong value, should be "stretch",
                                    though since that is the default,
                                    it is not needed  */
}

.content,
.single {
  width: 50%;
  background: yellow;
}
<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

