Flexbox scroll breaks when wrapped in flex-direction: column

Question

I'm trying to lay out a simple message container that will scroll when needed. This works as expected when the parent container only contains a header, and the message box, however, when wrapping it in another container and adding a bar on the right the side of the message box, the message box height does not respect the overflow setting and expands past the parent container. How can I get the message box to scroll while using a column next to it?

.flex-container {
    display: flex;
}
.flex-fill {
    flex: 1 0 auto;
}
.flex-rows {
    flex-direction: column;
}
.message-container {
    justify-content: flex-end;
    overflow-y: auto;
    flex: 1;
}
.message {
    height: 3rem;
}


    
        
            Working Scroll
        
        
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
        
    
    
        
            Broken Scroll
        
        
            
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
            
            
                Right

Here is a CodePen example. https://codepen.io/dwpuush/pen/eYzvQQJ

user_8620333 · Answer

Update the flex-fill class to allow the element to shrink and also add min-height:0; to force the element to shrink even past its content size

.flex-container {
    display: flex;
}
.flex-fill {
    flex: 1 1 auto; /* instead of 1 0 auto*/
    min-height:0;
}
.flex-rows {
    flex-direction: column;
}
.message-container {
    justify-content: flex-end;
    overflow-y: auto;
    flex: 1;
}
.message {
    height: 3rem;
}


    
        
            Working Scroll
        
        
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
            Testing Message
        
    
    
        
            Broken Scroll
        
        
            
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
                Testing Message
            
            
                Right

Flexbox scroll breaks when wrapped in flex-direction: column

1 Answers