Prevent flex item from exceeding parent height and make scroll bar work

Question

How can I prevent a child div with scrollbars and flex:1 from exceeding the height of its parent flexbox in Firefox? It works correctly in Chrome.

CodeP

Answer 1

I am marking Michael_B's answer as the correct one, since it is a valid solution along with an explanation. In addition here is another solution I came up with, which does not require modifying the flex-basis:

#messagescontainerrow {
        flex: 1;

        min-height: 0;   /* ADDED THIS. */

        border: 5px double black;
    }

#leftdiv {
        display:flex;
        flex-direction:column;

        max-height: 100%; /* ADDED THIS */

        border: 1px solid green;
    }

#rightdiv {
        display:flex;
        flex-direction:column;

        max-height: 100%; /* ADDED THIS */

        border: 1px solid blue;
    }

Explanation:

As per the current Flexbox specification https://www.w3.org/TR/css-flexbox-1/#min-size-auto

In general, the automatic minimum size of a flex item is the smaller of its content size and its specified size. However, if the box has an aspect ratio and no specified size, its automatic minimum size is the smaller of its content size and its transferred size. If the box has neither a specified size nor an aspect ratio, its automatic minimum size is the content size.

So, by default #messagescontainerrow was taking on a minimum height based on its contents, rather than respecting the height of its parent flexbox. This behavior can be overridden by setting min-height:0.

By making this change one sees what is displayed in the following image; note that @messagescontainerrow - the one with the double line border - is now the same height as its parent - the one with the purple dashed border.

(Note that the more recent draft specification, found here - https://drafts.csswg.org/css-flexbox/#min-size-auto - says "for scroll containers the automatic minimum size is zero". So in future we might not need to do this).

What remains now is the issue of its children, #leftdiv and #rightdiv, overflowing its borders. As Michael_B pointed out, overflow requires a height or max-height property to be present. So the next step is to add max-height: 100% to both #leftdiv and #rightdiv, so that the overflow-y:scroll property of their children gets triggered.

Here is the result: