Shrink to fit content in flexbox, or flex-basis: content workaround?

Question

I want columns One and Two to shrink/grow to fit rather than being
fixed.

Have you tried: flex-basis: auto

or this:
flex: 1 1 auto, which is short for:

flex-grow: 1 (grow proportionally)
flex-shrink: 1 (shrink proportionally)
flex-basis: auto (initial size based on content size)

or this:

main > section:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}
    
main > section:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto;
}
    
main > section:last-child {
    flex: 20 1 auto;
    display: flex;
    flex-direction: column;  
}

revised demo

Make flex items take content width, not width of parent container
Make flex container take width of content, not width 100%

Leave a Comment Cancel reply