title: semantic ui make content div scrollable but not the whole page scrollable? (meteor + react)
body: <p>I want to achieve something like this, that I searched up here before:</p>
  
  <p>jsfiddle.net/psychomachine/03pfvhzs/1/</p>
  
  <p>But the result I am getting for my application is this:</p>
  
  <p><a href="https://i.imgur.com/S4wbKp9.png" rel="nofollow noreferrer">http://i.imgur.com/S4wbKp9.png</a></p>
  
  <p>This is the code that is being rendered:</p>
  
  <pre><code>//App.js
  render() {
  return &lt;div className="main2"&gt;
    {/*HEADER (NAVIGATION + CONTEXT BAR)*/}
    &lt;Navigation /&gt;
    {/*CONTENT*/}
    &lt;div className="pusher"&gt;{ this.props.children }&lt;/div&gt;
  &lt;/div&gt;;
  },
  </code></pre>
  
  <p>Example code that goes in the content div, i.e. "pusher"</p>
  
  <pre><code>&lt;div className="ui main text container"&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
    &lt;h3&gt;Page Two&lt;/h3&gt;
  ..... // This goes on for another 20 times, just to get scrolling to show
  &lt;/div&gt;
  </code></pre>
  
  <p>And the div for the menu bar, that is rendered at :</p>
  
  <pre><code>&lt;div className="ui top attached demo inverted menu"&gt;
  Rest of the code is at: http://semantic-ui.com/examples/fixed.html
  If you view the page source, since it will be too cluttered to put in here
  </code></pre>
  
  <p>Is it not possible to do in React, due to how it renders things?</p>
  
  <p>This is really bugging me, but if it can't be done, oh well, ill have to live with page inconsistencies because pages without scrolling content won't have a bar, and those that do, will have a scroll bar that will push everything to the left a little</p>