Flex sidebar: how to grow to 100% of height

Question

I´m building a sidebar using CSS flex and I need it to grow vertically to fill the whole screen vertical height. Here is a skeleton of what I´m doing.

JSFiddle here

Answer 1

I think I got it pretty close by assigning the full viewport height to your container and then removing flex: 1 from .content children.

.app {
  display: flex;
  flex-direction: row;
  . align-items: flex-start;
  height: 100vh;
  width: 100%;
}

.sidebar {
  background-color: red;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  background-color: grey;
}

.content-main {
  background-color: yellow;
}

  

    This is sidebar
  
  

    

      Content Header
    
    

      This is the main content