Stacking DIVs - Dynamic Height Top DIV (Valid CSS?)

Question

I'm trying to figure out how to stack two boxes in my view using HTML/CSS, for a mobile web application. I don't want to use JavaScript, or hardcode values anywhere within this skeleton design.

Requirements:

• top box is dynamic height, contents need to be absolutely positioned and account for overflow (which is to be hidden if out of bounds)

• bottom box is fixed height

https://i.sstatic.net/Fdj7r.png

I've been messing around, and came up with this here. It works in Safari and Firefox. However, what I am not sure of, is that it is valid CSS. Basically, if I deploy this web app, do I have to worry about it breaking in the future because I'm violating some arcane and obscure styling rule? If so... how can I fix the code, so that it's valid?

I'm not concerned about a browser breaking it because they farked up the rendering engine... because it'll get fixed. I'm concerned about whether or not this is valid code to begin with.

Here's the code, there's the CSS styling included in the fiddle

<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
    <!-- define our table -->
    <div class="table" style="padding: 0; margin: 0; width: 96vw">
        <!-- row -->
        <div style="display: table-row; padding: 0; margin: 0">
            <!-- cell -->
            <!-- this is the cell that needs to be dynamic height -->
            <!-- and overflow hidden any possible content as well -->
            <div class="cell" style="width: 100%">
                <!-- relative inner cell -->
                <div style="position:relative; height: 100%; padding: 0">
                    <!-- absolute hidden cell that takes up the entire space -->
                    <div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
                                    This text appears on the top 
                        <!-- fixed bottom content -->           
                        <div style="position: absolute; bottom: 0">
                            This text appears on the bottom of the cell
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: table-row">
            <!-- bottom row that's fixed size -->
            <div class="cell" style="background-color: red; border-top: 2vw solid black;">
                <!-- content that will change on page to page -->
                <div style="height: 20vw !important;">
                    foo
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Looks solid to me. It's valid CSS3 and I can't find anything to suggest support for the style here will be dropped.