Making flexbox container override content height?

Question

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:

Not Chrome:

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?

See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior. — Michael Benjamin, Nov 24 '18 at 23:26

score 0 · Answer 1 · answered Nov 24 '18 at 16:55

0

If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.

div.header {
  height: 72px;
}

div.content-container {
  height: calc(100% - 72px);
}

answered Nov 24 '18 at 16:55

codeth

557
3
7

score 0 · Answer 2 · answered Nov 24 '18 at 23:14

0

Turns out I needed to remove content-container and just have content directly in the outer container div.

answered Nov 24 '18 at 23:14

Jez

27,951
32
136
233

That's not the optimal solution, nor does it address the underlying problem. You needed to use `min-height: 0` or `overflow: auto` on the content item. – Michael Benjamin Nov 24 '18 at 23:24
I am using `overflow: auto` on the content div. – Jez Nov 25 '18 at 01:16
I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question. – Michael Benjamin Nov 25 '18 at 03:39

Making flexbox container override content height?

2 Answers2