title: Scrolling with fixed div layout and min-widths
body: <p><img src="https://i.stack.imgur.com/NMJRb.png" alt="Desired outcome"></p>
  
  <p>I've been trying to layout this page, but for the life of me, can't seem to get it to work the way I want.</p>
  
  <pre><code>Window = black
  Titlebar = red
  Content div = blue
  Vertical scrollbar = green
  Horizontal scrollbar = yellow
  </code></pre>
  
  <p>Min titlebar/content div width of 1024px, growing to window size.</p>
  
  <p>I may be completely overthinking it and the answer may be way simpler than I'm attempting.</p>
  
  <p>Basically I want to have a fixed titlebar div at the top of the page that never scrolls vertically.  If it does not fit in the window horizontally, I want the horizontal scrollbar to scroll both the titlebar and content.  If the content div is taller than the window height, I want it to scroll, otherwise I want it to extend to the bottom of the page.</p>
  
  <p>For the most part, I'm under next to no restrictions on how these divs may be set, so imagine there is a blank slate.</p>
  
  <p>Needs to work on modern browsers only on recent OSes.  Ideally only a CSS/HTML fix, but will consider some JS if absolutely required.  Needs visible scrollbars (some versions I tried the scrollbars were off outside the window scope, ie, not just mousewheel scroll, but click and drag scroll).</p>