gist-react: confining gist to a div w/ scrollbars

Question

I'm using gist-react to embed a gist on my next.js site. I'm having a hard time confining the gist to a div w/ scrollbars. I think a problem is that my css gets overridden in the module when the gist loads. I want to know if there's a way to confine the gist to a div w/ scrollbars without modifying the underlying dependency.

@/projects/[slug]/page.jsx

import styles from "./singleProject.module.css"
import { Gist } from 'gist-react';
...
<div className={styles.gistContainer}>
    <Gist gistId="2223329" />
</div>

@/projects/[slug]/singleProject.module.css

.gistContainer{
    width: 45%;
    height: 30%;
}

Inside the module, notice the css override in the iframe body. /node_modules/gist-react/dist/Gist.js

React.useEffect(() => {
    if (!ref.current) return;

    const $iframe = ref.current;

    $iframe.srcdoc = `
      <style>
        *{box-sizing: border-box; overflow-y: hidden;}
      </style>
      <base target="_blank">
      <script src="${url}"></script>`;
  }, [url]);

return (
    <iframe
      ref={ref}
      onLoad={() => {
        if (!ref.current) return;
        const $iframe = ref.current;
        const innerHeight = $iframe.contentDocument?.body.scrollHeight;
        $iframe.style.height = String(innerHeight) + 'px';
      }}
      style={{ border: 0, width: '100%' }}
      id={iframeId}
    />
  );

I tried editing the dependency several times, but I couldn't seem to get height or scrollbars to work the way i wanted.

React.useEffect():

• removed overflow-y: hidden. That added unintended scrollbars.

return Statement:

• Removed the height styling from the $iframe, also from the $iframe.contentDocument?.body

• Added maxHeight to the $iframe, also the $iframe.contentDocument?.body

I tried .gistContainer iframe{ width: 45%;height:30%;max-height:30%} in the css. That didn't work either, because the container dimensions were not preserved after the dependency adjusted the iframe styling.

Non-duplicates:

• how-to-change-height-of-a-dynamically-embedded-gist Tried & failed
• make-gist-embed-scrollable Tried & failed

Answer 1

@/projects/[slug]/singleProject.module.css

.gistContainer iframe{
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

This solves part of the problem.

Here's how to change the scrollbars:

/node_modules/gist-react/dist/Gist.js

$iframe.srcdoc = "\n      <style>\n        *{box-sizing: border-box; overflow-y: auto;}\nbody::-webkit-scrollbar {display: none;}      </style>\n      <base target=\"_blank\">\n      <script src=\"".concat(url, "\"></script>");

I chose to comply with the existing code formatting convention. This seems to have solved my issue.