JSFiddle - React, Tailwind, and code Playground

HTML

<p>According to http://www.w3.org/TR/css3-flexbox/ the iframe below should shrink to the width of its containing element.
</p>

<p>
    In Chrome 10.0.642.2 dev on Win XP SP3 it doesn't work.
</p>


<p>Adding <code>display:block</code> to the iframe fixes this. (<a href="#" onclick="document.getElementById('iframe1').style.display='block';return false;">click to add</a>) (<a href="#" onclick="document.getElementById('iframe1').style.display='';return false;">click to remove</a>)</p>
<br /><br />

    <div id="div1">
        <iframe id="iframe1" src="http://www.mozilla.org/"></iframe>
    </div>
In ff 4 this text is inline with #div1!

<br />
<br />
Testing other inline elements:
<hr />

    <div id="div2">
        <span id="inline1">Hi</span>
    </div>

CSS

#div1 {
    display: -webkit-box;
    display: -moz-box;
    width:200px;
    height:400px;
    background:red;
}
#iframe1 {
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    min-width: 100px; 
    max-width: 300px; 
    height: 300px;
}
 #div2 {
    display: -webkit-box;
    display: -moz-box;
    width:200px;
    height:400px;
    background:red;
}
#inline1 {
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    min-width: 100px; 
    max-width: 300px; 
    height: 300px;
    background:blue;
}