Facebook page embed iframe doesn't fill container width

Question

I added an iframe of wikipedia to demonstrate the problem I have.
The Wiki iframe is displayed correctly like it suppose to, but the facebook iframe isn't.

HTML:

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS:

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

As you can see I am asking facebook an iframe with width of 450px and in the images attached the width of the emulator is 375px, but still the fb iframe doesn't fill it container like the wikipedia iframe does.

How can I make fb iframe to fill it container?

Answer 1

You can't make it 100% in a normal way.

This is your iframe src:

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

Note that there is parameter: width=450px.

It set the width of the iframe content to be 450px.

According to Facebook Plugin documentation:

The pixel width of the plugin. Min. is 180 & Max. is 500.

So the maximum width Facebook can get is 500.

Answer 2

Facebook states on the Page Plugin site

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout

and

No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

So I would think your best option would be to fill the width of the parent as much as possible (up to the 500px limit), and then centre it in the parent. If you try over riding the CSS set by facebook, it starts to display incorrectly, such as the posts not filling the timeline.