Keep the middle item centered when side items have different widths

Question

Imagine the following layout, where the dots represent the space between the boxes:

[Left box]......[Center box]......[Right box]

Answer 1

You can do this like so:

.bar {
    display: flex;    
    background: #B0BEC5;
}
.l {
    width: 50%;
    flex-shrink: 1;
    display: flex;
}
.l-content {
    background: #9C27B0;
}
.m { 
    flex-shrink: 0;
}
.m-content {    
    text-align: center;
    background: #2196F3;
}
.r {
    width: 50%;
    flex-shrink: 1;
    display: flex;
    flex-direction: row-reverse;
}
.r-content { 
    background: #E91E63;
}

    

        
This is really long content.  More content.  So much content.
    
    

        
This will always be in the center.
    
    

        
This is short.