Trying to make a google sheet embed auto size (without scrolling) on the webpage

I've tried using fit-content, fill-content, height="100%", and height="auto" I'm not sure if this is possible, but if it's not google definitely should try and figure out a way to make it work.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <iframe
        src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"
        width="100%" height="fill-content"></iframe>
</body>

</html>

Solution

You cannot change the style of an external iframe with internal CSS. Like many other Google embeds, Google Sheets does not give you the option to make the embed responsive.