title: How to make a div in Electron scrollable
body: <p>I am writing a simple Markdown app in Electron. Currently, I just have a textarea, and a div, and some Javascript code that gets the text in the textarea, feeds it into Marked (a handy NPM module) and sets the content of the div with Jquery. </p>
  
  <p>I have already done overflow: auto; in my css document, and tried all of the obvious solutions I have come across, and none of them work. My textarea scrolls fine, but the div does not. It simply cuts off the text at the bottom. </p>
  
  <p>Here is my code : <a href="https://codepen.io/anon/pen/jZprNL" rel="nofollow noreferrer">https://codepen.io/anon/pen/jZprNL</a></p>
  
  <p>html: </p>
  
  <pre><code>&lt;div class="row fullHeight" id="container"&gt;
    &lt;div class="column fullHeight " id="markdown"&gt;
  
      &lt;textarea class="padding markdown-body nodrag" id="editor" placeholder="Write something briliant..."&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class="column fullHeight" id="preview"&gt;
      &lt;div class="padding markdown-body nodrag" id="output"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> /* there are some styles here the interact with .row and .column for responcive grid arangement, they are long so I have not added them here */
  
  #container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding-bottom: 30px;
  }
  #editor {
      background-color: #f4f6f7;
      border-width: 0px;
      resize: none;
      width: 100%;
      height: 100%;
      padding: 5px;
      padding-top: 15px;
      margin-right: 5px;
      overflow-y: auto;
      overflow-x: hidden;
  }
  #output {
      overflow: scroll;
      padding: 5px;
      padding-top: 15px;
  }
  
  /* a lot of these styles are irelevant to this question, and are simply here because of what I was doing with electron, but i might aswell add them */
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$editor.on('input propertychange', function () {
    var outputHtml = marked($('#editor').val());
    $output.html(outputHtml);
    console.log($('#editor').val());
  });
  
  // note that this doesnt work because Node isnt installed and stuff, but this is a small part of the JS code anyway, incase it is usefull. 
  </code></pre>
  
  <p>// edit added codepen </p>