title: Why is this row (with a form inside) behaving differently?
body: <p>I have a small problem. I'm playing around with a tutorial to create a chat room but I want it to be mobile friendly and what I did was to add "foundation" grid to it but it was harder than it seemed. </p>
  
  <p><a href="https://i.stack.imgur.com/tmaoD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tmaoD.png" alt="enter image description here"></a></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>* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font: 13px Helvetica, Arial; width: 100vw; height: 100vh; }
    #contentWrap{
     float:left;
     margin: 0 auto;
     width: 100%;
     height: 100%;
     position: relative;
    }
    #chat{
     border: 1px #000 solid;
     overflow-y: scroll;
    }
    
    #send-message { 
     box-sizing: border-box;
     padding-top: 2px; 
     bottom: 0;
     border: 1px solid black;
     display: block;
     width: 100%; 
     position: absolute;
  
     }
  
    #send-message input { box-sizing: border-box; border-style: solid; width: 100%; border-width: 1px; padding-top:10px; padding-bottom: 10px;  flex: 2;}
    #send-message button { box-sizing: border-box; background: rgb(130, 224, 255); border: none; width: 100%; padding-top:10px; padding-bottom: 10px; }
    #chat { list-style-type: none; margin: 0; padding: 0; }
    #chat li { padding: 5px 10px; }
    #chat li:nth-child(odd) { background: #eee; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  
   &lt;div id="contentWrap"&gt;
    &lt;div class="row"&gt;
     &lt;div id="users" class="twelve columns"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
     &lt;ul id="chat"&gt;
         &lt;i&gt;asd se unió a la conversación...&lt;/i&gt;&lt;br&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;sadads&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;aaa.&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;aas&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;asd&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;sadw&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;df&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;sad&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;asd&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;afd&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;daf&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;af&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;af&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;afd&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;dgbgggg&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;esto es una prueba&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;asdsf&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;sdd11&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;2&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;3&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;4&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;5ff&lt;/li&gt;&lt;li&gt;&lt;b&gt;asd: &lt;/b&gt;sd&lt;/li&gt;
        &lt;/ul&gt;
     &lt;form id="send-message"&gt;
      &lt;input id="message"  autocomplete="off" required autofocus="on"/&gt;&lt;br/&gt;
      &lt;button type="submit" &gt;Enviar&lt;/button&gt;
     &lt;/form&gt; 
    &lt;/div&gt; 
   &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the message box to stay at the bottom as that's to be expected from a chat message box! I  thought using position relative in the parent and position absolute in the child would fix it but it didn't. </p>