HTML - retrieve the max possible width of an inline-block
<p>I'm looking for a way to retrieve, in javascript, the max possible width of an HTML element with display: inline-block.
My goal is to insert some elements in a page generated by a CMS.
I need the max possible width to adjust the content to be inserted in it.</p>

<p>Example:</p>

<p>HTML:</p>

<pre><code>&lt;...&gt;
&lt;div class="ib"&gt;
    &lt;div class="b"&gt;
        &lt;div class="b" id="my_content"&gt;
            ...
        &lt;div&gt;
    &lt;div&gt;
&lt;/div&gt;
&lt;...&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.ib {
    display: inline-block;
}
.b {
    display: block;
}
</code></pre>

<p>I can only manage the element "my_content" and it's content. The parent elements are generated by the CMS, and I cannot change anything.
Using jQuery is ok.</p>

<p>[EDIT]<br>
Here's a <a href="https://jsfiddle.net/Kris_B/psodhaxz/" rel="nofollow noreferrer">jsfiddle</a> for a better explaination.<br>
Before inserting content in #my_content, I need to know the available width.
If there's no content in #my_content, I get a width of 0, even if I set <code>width:100%</code> and <code>max-width:100%</code>.</p>

<p>The CMS currently generates this structure. As I don't have any control on this, it may change in the future.</p>