Horizontal scrollbar on wide image in MkDocs

Question

I would like to display a wide image full height but with a horizontal scrollbar.

This works in JSFiddle

But it doens't in MkDocs

HTML

<div class="image-container">
<img src="https://mermaid.ink/svg/pako:eNpFkMtuwyAQRX8lmjWNPDxim3W2WXVRqWKDwqS2FIPlgJrU8r-XGqSuDojL0cxd4RocgYavxc6D8d-jIyzgBaJAFqiCU0Fb0BX09XtTWT1YRVhNWFVYXVhlmG3AYKJlsqPLI63GHw4G4kATGdD56Ohm0z0aYOUpPehinx-ji8Nf4GbvDzJ-yxabYnh_-SvouCRikGZnI51Hm_ecQO9JBuTGGJZLaWAvgsFs_WcI_5l8B73CE_Sb5B0_dr1sVCtQCcHgBRpFfzxxyYXgSnWtVLgx-NkN2Gy_M2N0dw" style="width: 1000px;" />
</div>

CSS

.image-container {
  height: auto;
  width: 100%;
  overflow: scroll;
 }

Actual result

Desired result (mockup)

It needs to be an SVG because it (can) contain hyperlinks I know the SVG does not have an 'inherent' height or width, setting a width manually is not ideal (better ideas welcome) but that s not the core issue here