Chartjs-ChartJS, nested flexbox, not shrinking

Ok, solved it myself. Apparently applying auto as a flex item starting width is the root cause.

By changing this

.main{
    flex:1 1 auto;
    border:1px solid black;
}

To

.main{
   flex:1 1 1px;
   border:1px solid black;
}

And let the flex-grow property do the rest (because we said the flex item can grow and shrink and should start with 1px) it will solve the issue.