Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"

Question

I have a website which uses angular-material and flexbox for it's layouts. I'm trying to include a Google Adsense snippet inside one of these flexbox containers, but it gives me the error: "adsbygoogle.push() error: No slot size for availableWidth=0". However, it runs properly if I put the same snippet outside of a flexbox container.

This is not ideal, since my entire site is made with flexbox. So I'd like to find a way to make this work within a flexbox container.

Here's a snippet of my code:

    <div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
      <div flex="" hide-xs="" show-gt-xs="">
        <h1>My Account</h1>
      </div>
      <welcome></welcome>
      <script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- responsive ad-->
      <ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
      <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({})
        });
      </script>
    </div>

I've also tried replacing all references to flex in the google ads to just display:block; I've tried using width, no width, min width, max width, all of them together. I've tried putting it wrapped in a div that is a flexbox column, I've tried putting it in a div that is display:block; with fixed widths, etc.

None of it seems to work.

Any ideas?

Is there a way to report this (possible) bug to Google?

Answer 1

I just came across this problem and came searching for help.

Only finding information on setting fixed widths (in PX?).

I knew this wasn't correct, I currently had a box with width 90% and worked fine.

One thing that annoyed me was on larger displays google ads never center.

I tried turning it in to a flexbox to align content and that's where my problems started.

I fixed this by setting a setTimeOut and addclass.

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }

    var timeoutID;
$(function() {
     timeoutID = window.setTimeout(centerAd, 1000);
})

with the class:

.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */

It gives google ads enough time to sniff the width of the element, and then centers it nicely. Often seamlessly.