title: Fix header in scrolling material-ui popover
body: <p><code>material-ui</code> can have a fixed header and footer in a <a href="https://material-ui.com/components/dialogs/#scrolling-long-content" rel="nofollow noreferrer">Dialog</a> with long, scrolling content.</p>
  
  <p>I wish to achieve this same effect, in a <a href="https://material-ui.com/components/popover/" rel="nofollow noreferrer">popover</a>.</p>
  
  <p>Taking the example:</p>
  
  <pre><code>&lt;Popover&gt;
    &lt;Header&gt;Fixed header&lt;/Header&gt;
    &lt;Content&gt;long long long text&lt;/Content&gt;
    &lt;Footer&gt;Submit button&lt;/Footer&gt;
  &lt;/Popover&gt;
  </code></pre>
  
  <p>I want the scrollbar to appear in <code>Content</code>, while <code>Header</code> and <code>Footer</code> stay fixed in their popover.</p>
  
  <p>I can achieve the desired result by setting a simple <code>style={{ height: 250 }}</code> on <code>Content</code>, but then I'd lose the dynamic sizing of the popover, which adjust its height according to the required size by its children but staying within the limits of the screen.</p>
  
  <p>Is this even possible by using the library itself? If not, is anyone aware of any workarounds?</p>