MkDocs中宽幅图片添加水平滚动条的实现问题

我需要在MkDocs中展示宽幅SVG图片，要求保持图片原有高度，同时让容器出现水平滚动条。这套实现代码在JSFiddle中可以正常运行，但在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;
}

效果对比 #

实际效果 #

期望效果（模拟图） #

补充说明 #

由于图片需要包含超链接，因此必须使用SVG格式。我了解SVG没有固有宽高，手动设置宽度并非理想方案（欢迎提供更好的实现思路），但这并非当前的核心问题。

内容的提问来源于stack exchange，提问作者Wouter Van Ranst