I am attempting to use CSS Flexbox (display: flex) to take up the remaining height of a window. I also want scrolling available... Maybe I have been going about this wrong, but have been looking for so long that other options have eluded me.
The idea is that there is a fixed container. Within that fixed container is a flexbox that takes up 100% of the height. I add items to the flex box that stack in a column. The last item I add (container-wrapper) has dynamic content inside that will replace HTML through AJAX calls (else I would just move the action-bar outside the wrapper and be done with it). This content wrapper is also a flex container (as well as a flex item) and set to grow and shrink with the height of the window. The last item of this flex container is supposed to allow scrolling as the window shrinks.
<!-- The fixed container --> <div class="fixed"> <!-- The first flex container - direction: column --> <div class="outer"> <div class="some-flex-item"></div> <div class="some-flex-item"></div> <!-- Grow and shrink with 100% of height --> <div class="container-wrapper"> <!-- inner HTML is dynamic --> <!-- flex: 0 0 auto --> <div class="action-bar"></div> <!-- Want this div to take up remaining height of window and have overflow-y scrolling --> <div class="container"> ... </div> </div> </div> </div>
Seems to work in IE 10+, Chrome, but Firefox doesn't add the scrollbar because container-wrapper's height grows unbounded due to the content inside. I should mention that an older version of Firefox displayed correctly (I think ~33), but updated versions do not.
I found a workaround where I make inner container position: relative and then wrap the inner contents of that in a div with absolute positioning set to 0 for top, left, bottom, right. Example here. I don't like this as it seems to defeat the purpose of flexbox layout. Is there any way to get this concept to play nicely across browser without having to do markup hacks?