Vertikální centrování s omezenou výškou

Mám dva elementy, vnější, který má pevnou šířku a povolený rozsah výšek. Vnitřní má libovolné rozměry, které se mění javascriptem (jedná se o komponentu na vykreslení grafů).

Cílem je, aby vnější element byl vertikálně trochu natahovací, ale při přetečení se mu objevily posuvníky. Dokud je vnitřní element menší, má být centrovaný v obou směrech.

Ukázka s flexem, pokus bez flexu
Podpora je nutná od IE11, ale IE10 by byla také příjemná. V IE11 stačí přidat display: flex k .container.
Existuje řešení bez flexu a JS?

A koukám, že u flexu se nezobrazuje posuvník při horizontálním přetečení (šířka vnitřního elementu větší než vnějšího), takže jednoduché použití flexu také není řešení.

Opravena ukázka s flexem, zapomněl jsem ji uložit.

Jo, nasavení pomocí JS by šlo, ale raději bych se tomu vyhnul, abych měl samotnou komponentu maximálně nezávislou na prostředí, ve kterém se bude zobrazovat. Je dost možné, že se vnitřní element bude jindy zobrazovat v jiném kontextu, kde toto chování nebude žádoucí. Proto jsem to chtěl řešit pomocí CSS, které je takové deklarativní.