IE, flex i overflow scroll problem

Pozdrav, imam jednu varijantu flex-a kojeg koristim da bi content ispunio prostor po visini i u slučaju kada je manji od toga prostora, a kada je veći onda se automatski uključi scroll-bar.

Primjer koji radi imamm na JSFiddle: Edit fiddle - JSFiddle - Code Playground

U Javascriptu možete mijenjati MikiCount varijablu, pa vidjeti kako se content ponaša kada ima malo mikija, i kada ih ima previše.
Stvar u suštini šljaka dok ne dođemo do IE-a.
Kada je IE u pitanju, onda da bi stvar šljakala moram umjesto:

main{
flex:2;
}

staviti:

main{
flex:2 0 auto;
}

Kažu da je to zato jer IE ima drugačije defaultne postavke flex-a, pa ih se ovako definira da budu kompatibilni sa ostatkom svijeta.

No kada dodam “flex:2 0 auto;” onda stvar puca za situaciju kada je mikija previše i kada bi se trebao uključiti scroll-bar …

Moguće da je neka sitnica u pitanju, ako netko zna što bi još trebalo promjeniti osim “flex:2 0 auto;” da stvar ne puca ??

Hvala.

Pravi li ti problem u layout-u ako stavis:

min-height: calc(100% - 10px);

Neznam kako si to točno zamislio…ali probaj staviti u jsFiddle file pa testiraj.
Ne vidim iskreno po kojoj osnovi bi zadavanje minimalne visine definiralo ponašanje koje se očekuje?

Možda i nisam bio jasan, pa da ponovim specifikaciju očekivanog ponašanja.

Ideja je da parent koji ima header, content, footer bude varijabilne visine. (U ovom slučaju mu je zadana max visina koju može imati, no tehnički bi mu mogao biti zadan i striktni height)
A za content vrijedi:
-ako je manji od slobodnog prostora koji mu se nudi, neka ispuni sav slobodan prostor
-ako je veći od slobodnog prostora, neka ima scroll bar