table-cell + height... wtf?

HTML

<div class="main">
    <div class="item">
        <div class="table">
        <div class="fixme">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<button id="js-set-txt" class="test-btn-left">toggle text</button>
<button id="js-set-height" class="test-btn-right">toggle height</button>

CSS

.fixme {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    overflow:hidden;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative;
    margin: 20px;
    width: 320px;
    height: 480px;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    overflow: hidden;
}

.table {
    display: table;
    position: absolute;
    top: 2.083333333333333%;
    left: 50%;
    height: 50%;
    width: 50%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.child {
    position: relative;
    overflow: hidden;
    left: 0%;
    height: 16.666666666%;
    width: 93.75%;
    background-color: rgba(255, 255, 255, 0.5);
}

.child-inner {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

p {
    margin: 0;
    padding: 0;
}

.test-btn-right,
.test-btn-left {
    position: fixed;
    bottom: 10px;
}

.test-btn-left {
    left: 10px;
}

.test-btn-right {
    right: 10px;
}

JavaScript

var badText = 'Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.';

var goodText = 'Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum';

var badHeight = '16.666666666%';
var goodHeight = '40px';

var toggleText = function(){
    toggleText._$el = toggleText._$el || $('.child-inner p');
    toggleText._is = toggleText._is || 'bad';
    
    if (toggleText._is === 'bad'){
        toggleText._$el.text(goodText);
        toggleText._is = 'good';
    } else {
        toggleText._$el.text(badText);
        toggleText._is = 'bad';
    }
};

var toggleHeight = function(){
    toggleHeight._$el = toggleHeight._$el || $('.child');
    toggleHeight._is = toggleHeight._is || 'bad';
    
    if (toggleHeight._is === 'bad'){
        toggleHeight._$el.css('height', goodHeight);
        toggleHeight._is = 'good';
    } else {
        toggleHeight._$el.css('height',badHeight);
        toggleHeight._is = 'bad';
    }
};

$('#js-set-txt').click(toggleText);
$('#js-set-height').click(toggleHeight);