It seems that in Firefox, if I have div A with fixed width/height and it has a child div B with width and height set to 100%, then B will have a computed width of 0 (and hence not be displayed) if A or any other ancestor of B has display: box (or the appropriate vendor-prefixed version) set.
Example HTML:
<div id="a">
<div id="b"></div>
</div>
Example CSS:
#a {
width: 300px;
height: 200px;
background-color: green;
display: -webkit-box;
display: -moz-box;
}
#b {
width: 100%;
height: 100%;
background-color: red;
}
In firefox, a green box will be shown, but in Chrome, a red one shows.
Here is a fiddle for viewing this example. Here is another fiddle with another layer of nested divs that shows that this occurs even if it is not the direct parent of the element in question which has display: box.
I would like the width: 100% declaration on B to force it to be the same size as the parent (i.e. the behavior in Chrome). Why is the width computed to be 0?
Setting
box-flex: 1.0;(defaults to0.0) for#bin your example has the desired effect: Demo.