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/"/>
    </div>


The css:<br/>
<pre>
#div1 {
    display: -webkit-box;
    width:200px;
    height:400px;
    background:red;
}
#iframe1 {
    -webkit-box-flex: 1; 
    min-width: 100px; 
    max-width: 300px; 
    height: 300px;
}
</pre>

CSS

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