I'm attempting to design a webpage without a scrollbar by utilizing CSS3 box-flex. This is my current code:
<html>
<body style="height:100%;display:-webkit-box;-webkit-box-orient:vertical;"> <!-- height set to 1000px -->
<div style="height:100px;">test</div>
<div style="-webkit-box-flex:1.0;">
<div style="height:100%;">test</div> <!-- expecting this to be 900px, but it remains at 1000px -->
</div>
</body>
</html>
Is there a way to make the child div occupy the remaining space in the page without using Javascript? (which would be 900px in this scenario).
P.S. I have implemented a Javascript solution for resizing on browsers that do not support CSS3.
Edit: P.P.S: The child div actually contains an iframe in my code, and it appears that box-flex does not function properly with iframes.