title: Make scrollable div take up remaining height
body: <p>I'm trying to make a page with a very simple layout: a header that stays in one place, and content that scrolls under it. The header div will be an unknown height that shows all of its content. I want the content div to take up all of the space between the bottom of the header and the bottom of the page AND to be able to scroll. </p>
  
  <p>I have a couple of constraints on this:</p>
  
  <ul>
  <li>I don't want to use fixed or absolute positioning to keep the header in place, but rather have a div of the perfect height display the content, and have only that div be scrollable</li>
  <li>I don't want to set <code>max-height</code>, or any other property that requires knowledge of the height of the header div</li>
  </ul>
  
  <p>The two methods that I have explored to achieve this are using a table layout and using a flex box. I have not managed to get scrolling working with either of these two methods. Below is the code for both attempts. I am using React. Any pointers would be greatly appreciated. Thanks!!</p>
  
  <p><strong>EDIT</strong>: I <em>did</em> do this successfully using inline styles and measuring the height of the header after it was generated. This worked on chrome on desktop, android chrome, and android browser, but it broke in ios safari. I don't know why it broke, and I am working on debugging, but I would prefer a cleaner solution that doesn't require inline styles. Thanks!</p>
  
  <p><strong>the react element:</strong></p>
  
  <pre><code>var SimpleScrolly = React.createClass({
      render: function(){
          var lorem = "Lorem ipsum dolor sit amet... ";
          var sampleText = lorem + lorem + lorem + lorem;
          var sampleHeader = "this is a header!"
  
          return(
              &lt;div className={"simple_scrolly"}&gt;
                  &lt;div className={"header"}&gt;
                      {sampleHeader}
                  &lt;/div&gt;
                  &lt;div className={"content"}&gt;
                      {sampleText}
                  &lt;/div&gt;
              &lt;/div&gt;
              );
      }
  });
  </code></pre>
  
  <p><strong>styling for table layout:</strong></p>
  
  <pre><code>.simple_scrolly{
  
    display: table;
    height: 100%;
  
    .header{
      display: table-row;
    }
  
    .content{
      overflow: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      display: table-row;
    }
  }
  </code></pre>
  
  <p><strong>styling for flex layout:</strong></p>
  
  <pre><code>.simple_scrolly{
  
    display:flex;
    flex-direction: column;
    align-items: flex-start;
  
    .header{
      flex-grow:0;
    }
  
    .content{
      overflow: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      flex-grow:1;
    }
  }
  </code></pre>