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?