【CSS】上被せしたい要素の高さに合わせてdivの設定をする

やりたいこと

自分のReactのサイトにInstagramの埋め込みを使用しているのですが、この埋め込みがクリックされた際の動作を追加したいと思いました。Instagramの埋め込みの詳細については、以前の私の記事Reactでインスタグラム投稿の埋め込みを行った時にハマったことを参照頂きたいのですが、実際に埋め込む際はjsの処理を走らせて、投稿の表示部分はiframeになります。
iframeになるとクリックされた時の処理が手を出せず、dangerouslySetInnerHTMLのdiv要素にonClickを指定しても効きませんでした。とれる手段としては、このInstagramの投稿にdiv要素を上被せして、クリックされた時の処理を制御したいと考え、この記事の内容の実装に至りました。

前提や対応方法など

• Reactを使用する前提とします。また、上記の過去に書いた私の記事の通り、Instagramの投稿はdangerouslySetInnerHTMLで埋め込みコードを設定します。
• div要素の上被せはCSS「position:relative」と「position:absolute」で画像や文字を重ねる方法を参考にします。親のdiv要素にrelativeを設定し、上被せしたいdiv要素にabsoluteを設定します。
• Instagramの投稿について、投稿の内容によって表示の高さは変わります。したがって上被せするdiv要素も可変にする必要があります。どう対応したかというとposition:absoluteした要素に可変の高さを与えるの記事を参考にし、親要素にdisplay: "block"を設定して、上被せするdivの高さにheight: 100%を設定して実現しました。

実装サンプル

インスタグラムの埋め込み内容は、propから渡ってくる前提とします。

SampleComponent.js

export default function InstagramPost(prop) {
  const onClickCustom = () => {
    // クリックされた時の処理
  };

  return (
    <>
      <div
        style={{
          position: "relative",
          maxWidth: "540px",
          height: "auto",
          content: "",
          display: "block",
        }}
      >
        {/*  上被せするdiv要素 */}
        <div
        　　style={{
         　　position: "absolute",
        　 　zIndex: 999,
         　　height: "100%",
        　　 width: "100%",
         　　maxWidth: "540px",
         }}
         role="button"
         onClick={onClickCustom}
        ></div>
	{/*  インスタグラムの投稿を表示する要素 */}
        <div
          dangerouslySetInnerHTML={{
            __html: prop.instagramCode,
          }}
          style={{ zIndex: -999 }}
        />
      </div>
    </>
  );
}