canvasのレスポンシブがうまくいかない

htmlでアニメーションを表示したいということで、用意していただいた素材を見ると
・〇〇〇〇.html
・〇〇〇〇.js
・imagesフォルダ（画像素材が入ってる）

とのことで、Adobe Animateで「JavaScript/HTML」で書き出されたファイルでした。
たまに見る、canvasですな。

htmlの該当部分をコピペして表示はすぐにできました。
が、
これをレスポンシブにしたくて設置したけども、画面サイズに合わせてwidthが設定されている。
書き出し時に「レスポンシブにする」にチェックを入れてあるけど、親のボックスサイズではなく、画面幅に合わせられているのではみ出る。
親ボックスにpaddingを入れようものならpadding分はみ出る。

jsはさっぱりわからないからガチガチに書いてあるjsファイルの中身を見てもさっぱりわからない。
cssを書いてもインラインで上書きされちゃうしどうしたら・・・と相当迷っていたのですが、
納得いかないけど解決したので、いかに解決方法を記載します。

HTML

<div id="animation_container">
      <canvas id="canvas"></canvas>
      <div id="dom_overlay_container"></div>
</div>

CSS

#animation_container {
    width: 100% !important;
    height: auto !important;
}
#animation_container canvas {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}

まさかのimportant固め。
すごい無理矢理感あるし、気持ち悪いけど、とりあえず今のところ表示は問題なさそう。
もっとスマートなやり方見つけたら追記します。