Set auto-width for embedded facebook posts

Question

I am working on a simple HTML/CSS/Javascript + jQuery app that displays embedded facebook posts based on data returned by an API. Everything is working nicely, except I'm having a hard time setting the width + height for the posts themselves. I'm wanting to set the width/height to auto or fit-content so that the frame will stretch to fit the content, but those styling rules are having no effect. If I set a specific width/height in pixels, I see changes, but that means that I have to set the width per the widest post, and then the posts with smaller images have tons of whitespace around them. Same goes for the height.

It's always tricky to handle styling when there is a ton of boilerplate code that I didn't write myself...but I'm wondering why I'm able to change the width/height in pixels, but not able to use a rule like auto. I'd love to understand this better if anyone has any ideas what's happening.

Here is a codepen, and see below for code as well. You will find that if you set the width to 700px and the height to 800px, you're able to see the full content, but then there is way too much whitespace, and the posts are too big in general.

facebookArr = [{
    post_id: "959689765514464",
    post_type: "FB"
  },
  {
    post_id: "959696358847138",
    post_type: "FB"
  },
  {
    post_id: "959720495511391",
    post_type: "FB"
  },
  {
    post_id: "959725872177520",
    post_type: "FB"
  },
  {
    post_id: "959763208840453",
    post_type: "FB"
  },
  {
    post_id: "960116688805105",
    post_type: "FB"
  },
  {
    post_id: "960201025463338",
    post_type: "FB"
  },
  {
    post_id: "960245285458912",
    post_type: "FB"
  },
  {
    post_id: "960383525445088",
    post_type: "FB"
  },
  {
    post_id: "960441922105915",
    post_type: "FB"
  },
  {
    post_id: "960785228738251",
    post_type: "FB"
  },
  {
    post_id: "960845102065597",
    post_type: "FB"
  }
];

// Store container in variable
let facebookContainer = document.getElementById("facebook-feed-container");

facebookArr.forEach((post) => {
  const postId = post.post_id;

  const postContainer = document.createElement("div");
  facebookContainer.append(postContainer);
  postContainer.classList.add("post");

  $(".post--title").hide();

  // Append relative container to DOM parent container
  const postFrame = document.createElement("iframe");
  postContainer.append(postFrame);
  postFrame.classList.add("facebook-post-frame");
  postFrame.id = `fb-post__${postId}`;
  postFrame.src = `https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true`;
  postFrame.frameborder = "0";
  postFrame.allowfullscreen = "true";
  postFrame.allow =
    "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share";
});

#facebook-feed-container {
  display: flex;
  flex-direction: row;
  row-gap: 1rem;
  column-gap: 3rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.facebook-post-frame {
  width: fit-content; //does not work, must set px
  height: fit-content; //does not work, must set px
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="facebook-feed-container">

</div>

Answer 1

In case it's helpful to anyone, I solved this by finding the answer in the facebook docs...the default size for posts is 340px width and 500px height. So I just had to set the size accordingly per their default HTML as well as CSS rules. I'm not sure why both are needed, but that's what gets the best results. Here is updated codepen and see below for updated code:

facebookArr = [
  {
    post_id: "959689765514464",
    post_type: "FB"
  },
  {
    post_id: "959696358847138",
    post_type: "FB"
  },
  {
    post_id: "959720495511391",
    post_type: "FB"
  },
  {
    post_id: "959725872177520",
    post_type: "FB"
  },
  {
    post_id: "959763208840453",
    post_type: "FB"
  },
  {
    post_id: "960116688805105",
    post_type: "FB"
  },
  {
    post_id: "960201025463338",
    post_type: "FB"
  },
  {
    post_id: "960245285458912",
    post_type: "FB"
  },
  {
    post_id: "960383525445088",
    post_type: "FB"
  },
  {
    post_id: "960441922105915",
    post_type: "FB"
  },
  {
    post_id: "960785228738251",
    post_type: "FB"
  },
  {
    post_id: "960845102065597",
    post_type: "FB"
  }
];

// Store container in variable
let facebookContainer = document.getElementById("facebook-feed-container");

facebookArr.forEach((post) => {
  const postId = post.post_id;

  const postContainer = document.createElement("div");
  facebookContainer.append(postContainer);
  postContainer.classList.add("post");

  $(".post--title").hide();

  // Append relative container to DOM parent container
  const postFrame = document.createElement("iframe");
  postContainer.append(postFrame);
  postFrame.classList.add("facebook-post-frame");
  postFrame.id = `fb-post__${postId}`;
  postFrame.src = `https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true&width=340&height=500`;
  postFrame.frameborder = "0";
  postFrame.allowfullscreen = "true";
  postFrame.allow =
    "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share";
});

#facebook-feed-container {
  display: flex;
  flex-direction: row;
  row-gap: 1rem;
  column-gap: 3rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.facebook-post-frame {
  width: 340px;
  height: 500px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="facebook-feed-container">

</div>