title: CSS Flexbox height
body: <p>I'm trying to make a chat layout. So i have 3 divs, activeUSer - top, messages middle (has to fill the space between 1 and 3), actions - bottom</p>
  
  <p>Now, I've put flex-direction row. and it works fine. I needed the bottom div to grow if the input grows (if you have 2 or more lines of writing)</p>
  
  <p>It worked ok untill I added display:flex to the Actions div (bottom). I needed another flex layout for input and buttons. Now it does not care for the padding i've set on the last div</p>
  
  <p>Here is my codepen <a href="https://codepen.io/capraruioan/pen/XKWxrV" rel="nofollow">https://codepen.io/capraruioan/pen/XKWxrV</a></p>
  
  <pre><code>#content {
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  
  .activeUser { 
  height: 66px;
    background-color: yellow;
  }
  
  .Messages { 
      flex: 1 1 100%;
  }
  .Actions {
    flex-grow: 1;
    display: flex;
      padding-top: 2px;
    padding-bottom: 20px;
  }
  .aa { //the inputbox
    border: 1px solid black;
    min-height: 10px
  }
  </code></pre>