I'm trying to use Flexbox to get a layout where I have a bar along the top, and content for the rest of the page. A test case is at:

<http://game-point.net/misc/flextest/>

Interestingly, Google Chrome already behaves the way I want it to; when the viewport is sized too small vertically (all browsers seem to do what I want horizontally), the content in the `content` div overflows the div, and Chrome displays a vertical scrollbar for the content. However in Edge and Firefox, when the viewport is sized too small vertically, the `content` div itself is never sized to be vertically smaller than its text content, and therefore it overflows the viewport, causing the entire viewport to get a vertical scrollbar rather than just the `content` div. Here's the difference:

**Chrome:**  

[![Pic of Chrome](https://i.stack.imgur.com/MbM5h.png)](https://i.stack.imgur.com/MbM5h.png)

**Not Chrome:**  

[![Pic of Not Chrome](https://i.stack.imgur.com/9VkzA.png)](https://i.stack.imgur.com/9VkzA.png)

Which of these browsers is implementing flexbox correctly, and how can I get Firefox and Edge to scroll just the content box, as Chrome does, rather than the whole viewport?