【コーディング】スクロールバーが2つ表示されるときの対処法

どーもセキグチです！
画面外にモーダル設置していた時に起こった現象なのですが、
解消したのでメモ代わりに書いていこうと思います

起こった現象

なぜか表示される2本のスクロールバー

原因はこちらを使用していたこと

Overflow-x: hidden;

以下初期のcss

html,
body{
    font-size: 62.5%;
    Overflow-x: hidden;
}

最終的に解決したcssはこちら

html{
    font-size: 62.5%;
    Overflow-x: hidden;
}
body {
    font-size: 62.5%;
    overflow-x: clip;
}

ここにたどり着いたときに試したこと

これでbodyにかけるover-flowを変更したらうまく行きました
全部の事象に会わないかもしれませんがこちらも参考になれば幸いです

途中で色々試した失敗

これでは未解決

html{
    font-size: 62.5%;
    Overflow-x: hidden;
}
body{
    font-size: 62.5%;
    Overflow-ｙ: hidden;
}

もはや迷走

html{
    font-size: 62.5%;
    Overflow-x: hidden;
}
body{
    font-size: 62.5%;
    Overflow-x: hidden;
}

html{
    font-size: 62.5%;
    Overflow: hidden;
}
body{
    font-size: 62.5%;
    Overflow: hidden;
}

途中モーダルの表示方法変更など検討しましたが
色々試して解決してよかった
もし、こちらを見て解決した人がいれば幸いです