title: Bootstrap 4 Making row fixed height and connect
body: <p>I'm currently making a messaging system and I'm making the front end with bootstrap, but I have a small problem. I'm trying to make a row which a fixed height. I know I can do this with pixels but then it's not (I don't know how to explain this) fixed. You can see in the picture below the two rows. They're highlighted with the black borders.
  <a href="https://i.stack.imgur.com/EEnRR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EEnRR.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the picture the bottom row is fixed in place at the bottom which is good. But the top row needs to be the remaining height and fixed. That way its connected to the bottom part and can't get any more height so, in theory, making the scrollbar activate if the content inside has more height then the rows fixed height. 
  I tried doing it with <code>Height: -webkit-fill-available</code> but then it fils in the whole card that the row is in. How can I accomplish this without using for instance <code>min-height: 600px;</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.z-depth-1 {
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  }
  
  .txt-bubble {
      background-color: lightgrey;
      padding: 2px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;
      width: fit-content;
      margin-bottom: 5px;
  }
  
  .txt-bubble-response {
      background-color: #0069D9;
      color: white;
      padding: 2px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;
      width: fit-content;
      float: right;
      margin-bottom: 5px;
  }
  
  #conversation {
      max-height: 553px;
      min-height: 553px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
  &lt;div class="col-md-9"&gt;
    &lt;div class="card z-depth-1" id="conversation"&gt;
        &lt;div class="card-body"&gt;
            &lt;div class="row conversationrow"&gt;
  
                &lt;div class="col-md-1"&gt;
                    &lt;img src="img/foto.jpg" alt="" class="rounded-circle" width="52"&gt;
                &lt;/div&gt;
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble"&gt;Maar er zit een klein probleem aan dit systeem&lt;/p&gt;
                    &lt;small class="text-muted"&gt;2 Dagen geleden&lt;/small&gt;
                &lt;/div&gt;
  
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble-response"&gt;Ja klopt. Ik moet ervoor zorgen dat de kaart waar deze dingen in zitten, Scrolbaar wordt.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble-response laatste"&gt;Zodat de gebruiker niet de hele pagina hoeft te scrollen.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble-response laatste"&gt;Maar alleen de box waar de berichten in zitten.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-md-1"&gt;
                    &lt;img src="img/foto.jpg" alt="" class="rounded-circle float-right" width="52" &gt;
                &lt;/div&gt;
  
                &lt;div class="col-md-1"&gt;
                    &lt;img src="img/foto.jpg" alt="" class="rounded-circle" width="52"&gt;
                &lt;/div&gt;
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble"&gt;Hoe ga je dat doen dan? &lt;/p&gt;
                    &lt;small class="text-muted"&gt;2 Dagen geleden&lt;/small&gt;
                &lt;/div&gt;
  
                &lt;div class="col-md-11"&gt;
                    &lt;p class="txt-bubble-response laatste"&gt;Ik heb geen flauw idee, Ik heb het op StackOverflow gevraagt.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-md-1"&gt;
                    &lt;img src="img/foto.jpg" alt="" class="rounded-circle float-right" width="52" &gt;
                &lt;/div&gt;
  
            &lt;/div&gt;
  
  
            &lt;div class="row" style="position: absolute; bottom: 0; width: 100%;"&gt;
                &lt;div class="col-md-12"&gt;
                    &lt;hr&gt;
                &lt;/div&gt;
                
                &lt;div class="col-md-10"&gt;
                    &lt;form action=""&gt;
                        &lt;div class="form-group"&gt;
                            &lt;input type="text" class="form-control" id="SearchInbox" aria-describedby="inboxHelp" placeholder="Stuur een bericht"&gt;
  
                        &lt;/div&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
                &lt;div class="col-md-1"&gt;
                    &lt;button type="button" class="btn btn-outline-primary float-right btn-send-msg"&gt;Versturen&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>